hexo-next-imarkdown

interactive markdown render for Hexo with Theme-Next

Usage no npm install needed!

<script type="module">
  import hexoNextImarkdown from 'https://cdn.skypack.dev/hexo-next-imarkdown';
</script>

README

hexo-next-imarkdown

This plugin will render the interactive markdown.

npm Hexo Theme Theme

Preview & Docs

image

Quick Start

Install

# Create a new hexo project
hexo init <dir>
cd <dir>
# Add Theme-Next as git submodule
git init
git submodule add https://github.com/theme-next/hexo-theme-next themes/next
# remove the default marked render
yarn remove hexo-renderer-marked
# use the imarkdown render
yarn add hexo-next-imarkdown
# Set theme in main Hexo root config _config.yml file:
cat _config.yml

# _config.yml
theme: next

Configuration

You can config interactive markdown in _config.yml or source/_data/imarkdown.yml.

The following is the default configurations:

imarkdown:
  render:
    langPrefix: '' # DONT CHANGE
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  anchors:
    level: 1
    collisionSuffix: ''
    tone: false
  plugins: full

The Interactive Markdown use the markdown-itas the renderer.

The full plugins include:

  plugins:
    - "markdown-it-interactive" # CAN NOT BE REMOVED
    - "markdown-it-highlight-i" # CAN NOT BE REMOVED
    - "markdown-it-cjk-breaks"
    - "markdown-it-deflist"
    - "markdown-it-abbr"
    - "markdown-it-container"
    - "markdown-it-footnote"
    - "markdown-it-ins"
    - "markdown-it-sub"
    - "markdown-it-sup"
    - "markdown-it-math"
    - "markdown-it-mark"

Now, You can write your interactive markdown document, remember you must enable it in your md file(front-matter):

---
reactive: true
---

# Your Title

If you wanna reader can edit the code block on your article:

---
reactive:
  editable: true
---

# Your Title

More Interactive Markdown introduction see here pls: