JavaScript

markedでマークダウンをHTMLに変換して表示させる

2020/12/19 22:422020/12/19 22:42

markedライブラリでマークダウン記法の文字列をHTMLに変換して表示させてみた。
また、コードブロック内のコードはハイライト表示させたかったので、highlightjsライブラリもmarkedと組み合わせて利用した

環境

導入

$ yarn add marked
$ yarn add highlightjs

marked関数にマークダウン記法の文字列を渡すとHTMLが返却される。

index.tsimport React from 'react';
import marked from "marked";``

const Marked = () => {
    const markdownString =
        "# Header \n" +
        "**Bold** \n\n" +
        "[Google](https://www.google.com/)";

    return marked(markdownString);
}
export default Marked;

変換後のHTMLは以下のとおり

<h1 id="header">Header</h1> 
<p><strong>Bold</strong></p> 
<p><a href="https://www.google.com/">Google</a></p>

画面表示

dangerouslySetInnerHTMLなどを使いHTMLを画面表示させる。

index.tsimport React from 'react';
import marked from "marked";

const Marked = () => {
    const markdownString =
        "# Header \n" +
        "**Bold** \n\n" +
        "[Google](https://www.google.com/)";

    return <div dangerouslySetInnerHTML={{__html: marked(markdownString)}}/>;
}
export default Marked;

起動してブラウザを開くとHTMLに展開されて表示される。

img.png

コードをハイライト表示

ハイライト表示するにはhighlightjsにコードブロック内のソースコードを構文解析させてHTMLに変換させる必要がある。

marked関数の第2引数にはオプションが指定でき、highlightオプションを使うとコードブロックの内容に対して独自処理を挟むことが可能。

また、適用するcssはimportしておく。cssのテーマの一覧はhighlight.jsのデモページで確認することができる。

index.tsimport React from 'react';
import marked from "marked";
import highlight from 'highlightjs'
import 'highlightjs/styles/a11y-dark.css' // 適用するテーマを指定

const Marked = () => {
    const markdownString =
        "```javascript\n" + // コードブロック内のコードの言語を指定
        "import React from \"react\";\n" +
        "import SimpleMDE from \"react-simplemde-editor\";\n" +
        "import \"easymde/dist/easymde.min.css\";\n" +
        "\n" +
        "const MarkdownEditor = () => {\n" +
        "    return <SimpleMDE id=\"simple-mde\" />;\n" +
        "}\n" +
        "export default MarkdownEditor\n" +
        "```";

    const markedOptions = {
        highlight: (code: string, lang: string) => {
            return (
                '<code class="hljs">' + highlight.highlightAuto(code, [lang]).value + '</code>'
            );
        }
    };

    return <div dangerouslySetInnerHTML={{
        __html: marked(markdownString, markedOptions) // 第2引数にオプションを指定
    }}/>;
export default Marked;

ハイライト結果は以下のとおり。

img_2.png