markdown-it-smiles

A markdown-it plugin for rendering SMILES chemical structures

📦 GitHub Repository 📋 NPM Package 🎮 Interactive Demo 📚 Client Rendering 🧬 Server Side Rendering

🧪 Block SMILES

Render chemical structures in dedicated blocks with customizable options

⚛️ Inline SMILES

Embed molecular structures directly within text paragraphs

🖥️ Client/Server Rendering

Support both client-side and server-side rendering with renderAtParse option

🎨 Customizable

Control size, styling, and rendering options for each structure

🧪 Block SMILES Examples

Basic Usage

Markdown Input
```smiles
CCO
```
Rendered Output

With Custom Options

Markdown Input
```smiles {"width": 400, "height": 300, "bondThickness": 1.2}
C1CCCCC1
```
Rendered Output

Complex Molecule with Theme

Markdown Input
```smiles {"width": 500, "height": 350, "theme": "dark"}
CC(C)(C)c1ccc(O)cc1
```
Rendered Output

Benzene Ring with Custom Styling

Markdown Input
```smiles {"width": 300, "height": 250, "bondLength": 20, "atomVisualization": "balls"}
c1ccccc1
```
Rendered Output

⚛️ Inline SMILES Examples

Basic Inline Usage

Markdown Input
The molecule $smiles{CCO} is ethanol, while $smiles{C1CCCCC1} is cyclohexane.
Rendered Output

Inline with Custom Parameters

Markdown Input
Caffeine $smiles{CN1C=NC2=C1C(=O)N(C(=O)N2C)C}{"width": 100, "height": 80} is a stimulant found in coffee.
Rendered Output

📝 Mixed Content Example

Markdown Input
# Organic Chemistry Examples

## Simple Alcohols
The simplest alcohol is $smiles{CO} (methanol), followed by $smiles{CCO} (ethanol).

## Aromatic Compounds
```smiles {"width": 350, "height": 280}
c1ccccc1
```

Benzene is the fundamental aromatic compound with the molecular formula C₆H₆.

## Complex Molecules
Aspirin has the structure $smiles{CC(=O)OC1=CC=CC=C1C(=O)O} and is widely used as a pain reliever.
Rendered Output

🚀 Installation & Usage

Installation

npm install markdown-it-smiles

Basic Usage

import MarkdownIt from 'markdown-it'
import { MarkdownItSmiles } from 'markdown-it-smiles'

const md = new MarkdownIt().use(MarkdownItSmiles)

const result = md.render(`
# Chemical Structure
\`\`\`smiles
CCO
\`\`\`
`)

With Custom Options

const md = new MarkdownIt().use(MarkdownItSmiles, {
  renderAtParse: false, // Client-side rendering
  smilesDrawerOptions: {
    default: {
      width: 400,
      height: 300,
      theme: 'light'
    },
    inline: {
      width: 50,
      height: 50
    },
    block: {
      width: 500,
      height: 400,
      bondThickness: 1.2
    }
  }
})

Syntax Examples

# Block SMILES
\`\`\`smiles
CCO
\`\`\`

# Block SMILES with options
\`\`\`smiles {"width": 400, "height": 300, "theme": "dark"}
C1CCCCC1
\`\`\`

# Inline SMILES
The molecule $smiles{CCO} is ethanol.

# Inline SMILES with parameters
Caffeine $smiles{CN1C=NC2=C1C(=O)N(C(=O)N2C)C}{"width": 80, "height": 60} structure.