> ## Documentation Index
> Fetch the complete documentation index at: https://docs.somark.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# Syntax Reference

> Complete syntax guide for all SoMarkDown components with examples

## 1. Headings

SoMarkDown supports six heading levels following CommonMark, using `#` symbols.

```markdown theme={null}
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```

***

## 2. Text Styles

### Basic Styles

| Effect            | Syntax                   |
| ----------------- | ------------------------ |
| **Bold**          | `**text**` or `__text__` |
| *Italic*          | `*text*` or `_text_`     |
| ==Highlight==     | `==text==`               |
| Superscript       | `text^sup^`              |
| Subscript         | `text~sub~`              |
| ~~Strikethrough~~ | `~~text~~`               |

```markdown theme={null}
**bold text**
*italic text*
==highlighted text==
H^2^O (superscript)
CO~2~ (subscript)
~~strikethrough~~
```

### Underline

Wrap text with `++`. Every pair of `+` adds one underline level — you can stack levels by adding more `+`:

```markdown theme={null}
++underlined text++
++++double underline++++
```

### Blockquote

```markdown theme={null}
> Quoted text
>
> Multiple paragraphs supported
```

***

## 3. Special Symbols

### Emoji

Uses [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) syntax: `:emoji_name:`

### Copyright Symbols

| Character | Syntax           |
| --------- | ---------------- |
| ©         | `(c)` or `(C)`   |
| ®         | `(r)` or `(R)`   |
| ™         | `(tm)` or `(TM)` |

***

## 4. Lists

### Ordered List

```markdown theme={null}
1. First item
2. Second item
3. Third item
```

### Unordered List

Any of `*`, `+`, or `-` work as list markers:

```markdown theme={null}
- First item
- Second item
  - Nested item
```

***

## 5. Table of Contents

Insert `[[TOC]]` anywhere in the document to generate an automatic table of contents based on headings.

```markdown theme={null}
[[TOC]]
```

Reference: [markdown-it-table-of-contents](https://github.com/cmaas/markdown-it-table-of-contents)

***

## 6. Code

Code highlighting is powered by [highlight.js](https://github.com/highlightjs/highlight.js). Use highlight.js language identifiers for the language tag.

### Inline Code

```markdown theme={null}
Use the `print()` function to output text.
```

### Code Block

````markdown theme={null}
```python
def hello():
    print("Hello, SoMarkDown!")
```
````

Common language identifiers: `python`, `javascript`, `typescript`, `java`, `c`, `cpp`, `bash`, `sql`, `json`. If you want the overview and installation notes first, go back to the [SoMarkDown overview](/en/open-source-tools/somarkdown/index). See the [full list](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md).

***

## 7. Math Formulas

Math is rendered by [KaTeX](https://katex.org) using standard LaTeX syntax.

### Inline Math

```markdown theme={null}
The mass-energy equation $E = mc^2$ is a cornerstone of physics.

Euler's identity: $e^{i\pi} + 1 = 0$
```

### Display Math

```markdown theme={null}
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
```

***

## 8. Images

```markdown theme={null}
![semantic description](image URL)
```

SoMarkDown repurposes the Markdown alt-text field as the location for **AI-generated semantic understanding** of the image. In SoMarkDown renderers, the text in brackets is displayed as a semantic annotation. This design is backward compatible with standard Markdown.

```markdown theme={null}
![This chart shows exponential user growth from 2020 to 2024.](https://example.com/chart.png)
```

Control whether image descriptions are displayed via the `imgDescEnabled` config option:

```javascript theme={null}
new SoMarkDown({ imgDescEnabled: true })
```

***

## 9. Tables

SoMarkDown uses HTML `<table>` tags for tables instead of the native Markdown pipe syntax. This provides full support for merged cells (`rowspan` / `colspan`).

```html theme={null}
<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Merged cell</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>B2</td>
      <td>C2</td>
    </tr>
  </tbody>
</table>
```

***

## 10. Captions

Captions can annotate a Figure or Table. They start with `: ` (colon + space).

```markdown theme={null}
: Figure 1 — User growth trend

![chart](chart.png)
```

**Rules:**

* Must start with `: ` (a colon followed by exactly one space)
* Must be directly adjacent to the target component (above or below), with blank lines allowed but no other elements in between
* If captions exist on both sides, the one above takes priority

Reference: [Pandoc caption extension](https://pandoc.org/MANUAL.html#extension-table_captions)

***

## 11. Chemical Equations

Chemical equations use `\ce{}` syntax rendered by [mhchem](https://mhchem.github.io/MathJax-mhchem), and must be placed inside a math environment.

### Inline

```markdown theme={null}
The reaction $\ce{H2 + O2 -> H2O}$ is exothermic.
```

### Display

```markdown theme={null}
$$
\ce{CO2 + C -> 2 CO}
$$

$$
\ce{2H2 + O2 ->[\text{ignition}] 2H2O}
$$
```

***

## 12. Chemical Structures (SMILES)

Chemical structures use `\smiles{}` syntax rendered by [SmilesDrawer](https://github.com/reymond-group/smilesDrawer), and must be placed inside a math environment.

<Note>
  SoMarkDown treats SMILES notation as a special symbol within the math environment. This is because: (1) structures appear inside chemical equations; (2) like math formulas, they need both inline and display layout modes; (3) it keeps the integration consistent with chemical equations.
</Note>

### Inline Structure

```markdown theme={null}
Ethanol has the structure $\smiles{CCO}$.
```

### Display Structure

```markdown theme={null}
$$
\smiles{c1ccccc1}
$$
```

### Mixed Chemical Structure Equations (mhchem + SMILES)

SoMarkDown innovatively supports embedding `\smiles{}` inside `\ce{}`, merging structural and equation notation in a single expression:

```markdown theme={null}
$$
\ce{\smiles{CCO} + \smiles{O} -> \smiles{CC(O)O}}
$$
```

SMILES rendering can be customized via configuration:

```javascript theme={null}
new SoMarkDown({
  smiles: {
    disableColors: false,
    width: 300,
    height: 200
  }
})
```

***

## 13. Diagrams — Mermaid (Coming Soon)

Mermaid diagram support is in development. The planned syntax:

````markdown theme={null}
```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Execute]
  B -->|No| D[End]
```
````
