docsify-codeview

A docsify plugin that embeds a Monaco code editor next to your documentation — ideal for step-by-step coding tutorials.

When a page includes specially tagged code blocks, the plugin splits the page into two columns: your markdown lesson on the left, and an interactive editor on the right with buttons to switch between:

• 🛠 Starting Point — an editable code template for the reader to work from
• ✅ Potential Solution — a read-only solution
• 𝌡 Diff View — an inline diff between the reader's current code and the solution
• ⇐ 𝌡 — a diff against the previous chapter's solution

Pages without tagged code blocks render normally.

Setup

Add the plugin's stylesheet, the Monaco loader, and the plugin script to your docsify index.html:

<link rel="stylesheet" href="//unpkg.com/docsify-codeview/src/style.css">
...
<script src="//unpkg.com/docsify@4/lib/docsify.min.js"></script>
<script src="//unpkg.com/[email protected]/min/vs/loader.js"></script>
<script src="//unpkg.com/docsify-codeview/src/codeview.js"></script>

The Monaco loader must be included before codeview.js.

Usage

In a markdown page, embed code files using docsify's :include syntax with a template-<lang>, final-<lang>, or previous-<lang> tag:

[template](./assets/template.rs ':include :type=code template-rust')

[solution](./assets/solution.rs ':include :type=code final-rust')

[previous](./assets/previous.rs ':include :type=code previous-rust')

• template-<lang> — the editable starting point shown to the reader
• final-<lang> — the solution code
• previous-<lang> — the previous chapter's solution, used for the "previous diff" button

<lang> is any language supported by Monaco (e.g. rust, javascript, python) and controls syntax highlighting.

All tags are optional — provide only the ones a page needs. At least one of template or final must be present for the editor to appear.

This plugin also works alongside docsify-tabs to keep the raw code blocks organized for readers without JavaScript; the tabs are removed once the editor loads.

Example

A complete example lives in example/. To run it:

npx serve .
# then open http://localhost:3000/example/

Development

npm install
npm test

License

MIT