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>