marked(ver6)でマークダウンエディタを作る。ハイライト対応

自己開発のアプリにMarkdownEditorを組み込みしたかった。

「react markdown editor」でGoogle検索したところ
Reactでマークダウンエディタを作ってみよう

こちらが出てきた。まずはこちらの記事のソースを打ち込んでみたのだが、

// ハイライトの設定
marked.setOptions({
   highlight: (code, lang) => {
     return highlightjs.highlightAuto(code, [lang]).value;
   },
});

この部分でエラーになる。
どうもmarkedの6.0ではhilightオプションは無いらしい。。。

「marked 6.0.0 highlight」で次は検索してみた。
vue.js - markedjs missing codeblock and syntax highlight - Stack Overflow

こちらを見ると、どうもそれらしきことが書いてあった。
（やっぱり困っている人いるんだな。。）
上記を参考にして、結局自分は最初のサイトのサンプルを以下のように書き直した。

import React, { useState } from "react";
import SimpleMde from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark.min.css";

const MarkdownEditor = () => {
  const [markdownValue, setMarkdownValue] = useState("Initial value");

  const marked = new Marked(
    {
      gfm: true,
      breaks: true,
    },
    markedHighlight({
      langPrefix: "hljs language-",
      highlight(code: string, lang: string) {
        const language: string = hljs.getLanguage(lang) ? lang : "plaintext";
        return hljs.highlight(code, { language }).value;
      },
    })
  );

  const onChange = (value: any) => {
    setMarkdownValue(value);
  };

  return (
    <>
      <SimpleMde value={markdownValue} onChange={onChange} />
      <div>
        <div
          dangerouslySetInnerHTML={{
            __html: marked.parse(markdownValue) as string,
          }}
        ></div>
      </div>
    </>
  );
};

export default MarkdownEditor;