'remark-prism doesn't convert to HTML with classnames
I wanted to convert markdown to syntax highlighted HTML with remark and remark-prism. But it doesn't work.
code:
import {remark} from "remark";
import prism from "remark-prism";
import html from "remark-html";
const text = '```javascript\nconsole.log("Hello, world");\n```';
remark()
.use(prism)
.use(html)
.process(text, (_, {value}) => console.log(value));
result:
<div>
<pre>
<code>
<span>console</span>
<span>.</span>
<span>log</span>
<span>(</span>
<span>"Hello, world"</span>
<span>)</span>
<span>;</span>
</code>
</pre>
</div>
It looks good. But it doesn't contain classnames.
I wanted just like:
<div class="remark-highlight">
<pre class="language-javascript">
<code>
<span class="token console class-name">console</span>
<span class="token punctuation">.</span>
<span class="token method function property-access">log</span>
<span class="token punctuation">(</span>
<span class="token string">"Hello World"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
</code>
</pre>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
