# How Markdown Preview Functionality is Implemented in Lepton's Editor

> Discover how Lepton's editor implements Markdown preview functionality using React and markdown-it. Learn to detect file types convert content and inject HTML for a seamless preview experience.

- Repository: [CosmoX/Lepton](https://github.com/hackjutsu/lepton)
- Tags: internals
- Published: 2026-02-23

---

**Lepton renders Markdown previews by detecting the file type in the `CodeArea` component, converting content to HTML via a configured markdown-it instance, and injecting the result using React's `dangerouslySetInnerHTML`.**

The **Markdown preview functionality** in Lepton transforms raw Gist content into rendered HTML within the editor interface. This feature relies on a pipeline that detects Markdown files, processes them through a customized markdown-it parser, and displays the output alongside or in place of raw code. Understanding this implementation reveals how Lepton extends standard code editing capabilities to support documentation-rich snippets.

## Triggering the Markdown Preview in CodeArea

The rendering decision occurs in [`app/containers/codeArea/index.js`](https://github.com/hackjutsu/Lepton/blob/main/app/containers/codeArea/index.js) within the `renderCodeArea` method. This function receives the filename, content, and detected language, then routes Markdown files to a specialized handler:

```javascript
renderCodeArea (filename, content, lang, kTabLength) {
  const language = this.adaptedLanguage(filename, lang)
  let htmlContent = ''
  switch (language) {
    case 'Markdown':
      htmlContent = this.createMarkdownCodeBlock(content)
      break
    // … other cases …
  }
  return (
    <div className='code-area'
      dangerouslySetInnerHTML={{ __html: htmlContent }} />
  )
}

```

When the adapted language matches **'Markdown'**, the component invokes `createMarkdownCodeBlock` instead of standard code highlighting logic.

## Converting Markdown to HTML with markdown-it

The `createMarkdownCodeBlock` function wraps the output of `Markdown.render()` in a container div:

```javascript
createMarkdownCodeBlock (content) {
  return `<div class='markdown-section'>${Markdown.render(content)}</div>`
}

```

The `Markdown` object is a pre-configured **markdown-it** instance exported from [`app/utilities/markdown/index.js`](https://github.com/hackjutsu/Lepton/blob/main/app/utilities/markdown/index.js). This utility configures the parser with three critical extensions for enhanced **Markdown preview functionality**.

### Syntax Highlighting Integration

The markdown-it instance delegates code fence highlighting to **highlight.js** through a custom callback:

```javascript
import HighlightJS from 'highlight.js'
import MarkdownIt from 'markdown-it'

const Md = MarkdownIt({
  linkify: true,
  highlight: (str, lang) => {
    if (lang && HighlightJS.getLanguage(lang)) {
      try { return HighlightJS.highlight(lang, str).value } catch (_) {}
    }
    return HighlightJS.highlightAuto(str).value
  }
})

```

This ensures that code blocks within Markdown previews receive the same syntax highlighting as standalone code files.

### Task Lists and KaTeX Math Support

The configuration extends markdown-it with two additional plugins for rich document rendering:

```javascript
import MdTaskList from 'markdown-it-task-lists'
import MdKatex from 'markdown-it-katex'

const Md = MarkdownIt({ /* … */ })
  .use(MdTaskList)
  .use(MdKatex, { throwOnError: false, errorColor: ' #cc0000' })

export default Md

```

These plugins enable **GitHub-style task lists** (checkboxes) and **mathematical expressions** via KaTeX within the Markdown preview.

## Rendering the Preview with React

After conversion, the HTML string injection occurs through React's `dangerouslySetInnerHTML` prop in the `renderCodeArea` return statement:

```javascript
return (
  <div className='code-area'
    dangerouslySetInnerHTML={{ __html: htmlContent }} />
)

```

Because Lepton operates within a desktop **Electron** environment and processes trusted Gist content, this approach safely renders the pre-sanitized HTML output from markdown-it without additional DOM manipulation.

## Summary

- **Detection**: The `CodeArea` component in [`app/containers/codeArea/index.js`](https://github.com/hackjutsu/Lepton/blob/main/app/containers/codeArea/index.js) identifies Markdown files via the `adaptedLanguage` method and routes them to `createMarkdownCodeBlock`.
- **Processing**: The `Markdown` utility in [`app/utilities/markdown/index.js`](https://github.com/hackjutsu/Lepton/blob/main/app/utilities/markdown/index.js) wraps a markdown-it instance configured with highlight.js for code blocks, markdown-it-task-lists for checkboxes, and markdown-it-katex for math rendering.
- **Rendering**: The HTML output is wrapped in a `markdown-section` div and injected into the React component tree using `dangerouslySetInnerHTML`, providing live preview capabilities within the editor interface.

## Frequently Asked Questions

### How does Lepton determine when to show a Markdown preview versus code highlighting?

Lepton examines the file extension and language metadata in the `adaptedLanguage` method within [`app/containers/codeArea/index.js`](https://github.com/hackjutsu/Lepton/blob/main/app/containers/codeArea/index.js). When the detected language string matches **'Markdown'**, the component switches from standard code highlighting logic to the `createMarkdownCodeBlock` helper, which generates an HTML preview instead of a code editor view.

### Which Markdown parser does Lepton use, and what extensions are enabled?

Lepton uses **markdown-it** as its core parser, configured in [`app/utilities/markdown/index.js`](https://github.com/hackjutsu/Lepton/blob/main/app/utilities/markdown/index.js). The implementation enables three key extensions: **highlight.js** for syntax highlighting in code fences, **markdown-it-task-lists** for GitHub-style checkbox lists, and **markdown-it-katex** for rendering mathematical expressions. The configuration also sets `linkify: true` to automatically convert URLs to links.

### Is the Markdown preview in Lepton secure against XSS attacks?

The preview relies on React's `dangerouslySetInnerHTML` to inject HTML generated by markdown-it. While markdown-it provides basic HTML sanitization, Lepton operates within a **desktop Electron environment** where the content originates from the user's own GitHub Gists. This trusted-source context, combined with the local-only nature of the application, mitigates XSS risks without requiring additional sanitization layers for the preview functionality.

### Can I customize the CSS styling of the Markdown preview?

The generated HTML is wrapped in a `<div class='markdown-section'>` before injection, as seen in the `createMarkdownCodeBlock` method. This specific CSS class provides a hook for theming. Users can override styles for `.markdown-section` and its child elements (headings, lists, code blocks) through Lepton's custom CSS features or by modifying the application's stylesheet, though the latter requires rebuilding the application from source.