Code and Syntax Highlighting

MDash uses Shiki and bundled language grammars to highlight fenced code blocks. Add a language tag to select the syntax rules and colors for a block. For the surrounding document syntax, see the Markdown Guide.

Inline Code

Wrap a short snippet in backticks:

Run `npm install` before the first build.

Inline code works well for commands, variable names, and paths.

If the snippet itself contains a backtick, wrap it in two backticks:

``Use `code` inside the snippet.``

Fenced Code Blocks

Use three backticks and add a language tag:

```ts
const greeting: string = 'Hello';
```

The language tag selects the grammar. A fence without a language tag remains a plain monospace block.

A fenced code block is recognized only after a matching closing fence exists. Until then, MDash keeps the opening marker literal and continues rendering the following Markdown normally.

Choose Insert Code Block in the toolbar to search every bundled language, enter a custom supported tag, and write or paste code beside a live highlighted preview. Place the cursor inside an existing fenced block to edit its language and source through the same modal. If the code contains triple backticks, MDash automatically uses a longer outer fence.

Hover over a rendered code block to reveal Copy Code. If clipboard access fails, MDash selects the source so you can copy it manually.

Open Settings, choose View, and use Code in Preview to wrap long lines, show line numbers, or select a tab size. The options are independent: leave wrapping off for horizontal scrolling, enable line numbers for review, or use a narrower tab width in compact Preview panes. Line numbers are visual and are never included when you copy code. Recognized code files use the same highlighting and Preview preferences as fenced code blocks, and their detected language appears in the footer.

Common Language Tags

MDash supports Shiki's bundled language set. Common tags include:

Use the primary language name or a supported alias. Tags are case-insensitive, but lowercase tags are easier to scan and copy.

For every recognized primary tag and alias, see the complete language reference at the end of this guide.

Choose a Specific Tag or Plain Text

Choose the most specific tag when readers benefit from syntax colors, such as tsx, json, or sql. Use text when the content is console output, pseudocode, or a format without a suitable grammar. Leave the tag empty only when you deliberately want a plain monospace block.

If a specialized tag is unavailable, choose a broader compatible grammar. For example, shell is a practical fallback for an uncommon command-line language, while yaml can be useful for a configuration format with similar structure.

Examples

TypeScript

interface Note {
  id: string;
  title: string;
}

function displayTitle(note: Note): string {
  return note.title.trim() || 'Untitled';
}

Python

def word_count(text: str) -> int:
    return len(text.split())

print(word_count("Write clearly and edit carefully."))

Shell

npm ci
npm run typecheck
npm run build

JSON

{
  "name": "mdash",
  "private": true,
  "features": ["math", "diagrams", "wiki-links"]
}

TSX

export function SaveStatus({ saved }: { saved: boolean }) {
  return <span>{saved ? 'Saved' : 'Saving'}</span>;
}

SQL

SELECT title, updated_at
FROM notes
WHERE archived = FALSE
ORDER BY updated_at DESC;

YAML

title: Project Notes
tags:
  - planning
  - markdown

Theme and Layout

Highlighted colors follow the application theme. Long lines stay inside the code block with horizontal scrolling, and presentation slides allow long blocks to scroll.

Inline code is sized to sit naturally within prose. Fenced code, the editor, and code-file Preview follow the configured Text Size.

Coding Ligatures

Coding ligatures combine familiar operator sequences into clearer visual symbols without changing the source text, cursor positions, copying, searching, or exported Markdown. Open Settings, choose Fonts, and use Coding Ligatures to enable or disable them independently of the selected code font.

MDash bundles its code fonts locally. The included Monaspace families, JetBrains Mono, Fira Code, and Iosevka Charon Mono support common sequences such as:

->  =>  !=  !==  ==  ===  <=  >=  ::  ...

The exact drawing differs by family. Monaspace Neon is the default balanced design; Argon is more humanist, Krypton is more mechanical, Radon is more expressive, and Xenon is more slab-like. Choose the family for its overall readability rather than the number of ligatures it provides.

Turn ligatures off when you want every source character to remain visually separate, especially while teaching syntax or reviewing punctuation-heavy code.

Tips

• Add a language tag whenever you want highlighting.
• Keep presentation examples focused so the audience can read them.
• Copying returns the original source, not the highlighted HTML.
• Use text for output or examples that should remain visually neutral.

Troubleshooting

• If a fence stays plain, check the language tag spelling and remove punctuation after it.
• If MDash does not recognize a language, use a broader tag such as text, shell, or yaml.
• Very long lines scroll horizontally. Enable Wrap Code Lines in Settings > View when you want lines to wrap without changing the source.

Related Guides

• Markdown Guide
• Presentation Mode
• Import, Export, and Backup

Annex: Complete Language Reference

Use a primary tag or one of its aliases after the opening fence.

This annex reflects Shiki 1.29.2 and includes all 218 bundled grammars.