hexojs / hexo-renderer-markdown-it

Markdown-it is a Markdown parser, done right. A faster and CommonMark compliant alternative for Hexo.
MIT License
349 stars 60 forks source link

add support for markdown-it-classy #27

Closed m3t closed 4 years ago

m3t commented 8 years ago

BTW there's an issue which remains:

_em {classy}_ and __strong {classy}__ are supported as well.

does not convert to

<p><em class="classy">em</em> and <strong class="classy">strong</strong> are supported as well.
celsomiranda commented 8 years ago

I've been trying to fix the issue, but couldn't. Would preferer to merge only when it's fixed.

curbengh commented 4 years ago

does not convert to

Inline {classy} doesn't work even when used directly.

const classy = require("markdown-it-classy")
const MarkdownIt = require("markdown-it")
const md = new MarkdownIt()

md.use(classy);

const input = `_em {classy}_ and __strong {classy}__ are supported as well.

This is paragraph 2 and I wish there was a way to make it blue.
{blue}

## All kinds of headings work! {classy}`

console.log(md.render(input))
/*
<p><em>em {classy}</em> and <strong>strong {classy}</strong> are supported as well.</p>
<p class="blue">This is paragraph 2 and I wish there was a way to make it blue.</p>
<h2 class="classy">All kinds of headings work!</h2>
*/

"package.json"

  "dependencies": {
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-markdown-it": "^4.1.0",
+    "markdown-it-classy": "^0.2.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^2.0.0"
  }
# _config.yml
markdown:
  plugins:
    - markdown-it-classy

The plugin did load with above configs.

curbengh commented 4 years ago

As an alternative, you could use markdown-it-attrs which is more active.

Syntax is slightly different (notice the dot .)

_em_{.classy} and __strong__{.classy} are supported as well.

This is paragraph 2 and I wish there was a way to make it blue.
{.blue}

## All kinds of headings work! {.classy}
<p><em class="classy">em</em> and <strong class="classy">strong</strong> are supported as well.</p>
<p class="blue">This is paragraph 2 and I wish there was a way to make it blue.</p>
<h2 class="classy" id="All-kinds-of-headings-work">All kinds of headings work!</h2>

It also supports custom attribute:

text {data-toggle=modal}
<p data-toggle="modal">text</p>