Help us understand the problem. What is going on with this article?

react + marked + highlight の設定や拡張

はじめに

いなたつアドカレの六日目の記事です。

今回は前回に続いてMarkdownをReactで表示するために、htmlに変換する部分です。
あとは、シンタックスハイライトをする方法ですね。

じっそー

まずはインポートとインスタンスの生成

import marked from 'marked';
import hljs from 'highlightjs'
import 'highlightjs/styles/monokai.css' // monokaiの場合
const r = new marked.Renderer()

そして、markedの拡張(変更)

// h1,h2,h3 ....
r.heading = (text, level) => {
    let escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
    return (
        `
            <h${level}>
                ${text}
            </h${level}>
        `
    )
}

h1などのタグの拡張です。
rは先ほどインスタンス化したものですね。
headingがh1,h2などのタグにあたります。

これを使うことで、指定したclass名を付与し、cssによる管理が可能になります。

このほかにも様々な記法をHTMLタグに変換する過程で拡張できます。

以下が拡張できるものです(公式リファレンス参考)

ブロック要素

  • code(string code, string infostring, boolean escaped)
  • blockquote(string quote)
  • html(string html)
  • heading(string text, number level, string raw, Slugger slugger)
  • hr()
  • list(string body, boolean ordered, number start)
  • listitem(string text, boolean task, boolean checked)
  • checkbox(boolean checked)
  • paragraph(string text)
  • table(string header, string body)
  • tablerow(string content)
  • tablecell(string content, object flags)

インライン要素

  • strong(string text)
  • em(string text)
  • codespan(string code)
  • br()
  • del(string text)
  • link(string href, string title, string text)
  • image(string href, string title, string text)
  • text(string text)

次にインポートしたmarked本体の設定で、。これでhighlight.jsを有効にできます

marked.setOptions({
    highlight: function (code, lang) {
        return hljs.highlightAuto(code, [lang]).value;
    }
});

そして、以下のようにすることで、markdownをhtmlに変換します

marked(md, { renderer: r })

mdに入ってる値をmarkedを使って変換しています。ここをstateなどを指定することで、reactっぽくなりますね。

最後に前回と組み合わせて、stateのbodyに格納されたmarkdownをhtmlに変換しコンポーネント内部に展開して表示する部分を記しておきます。

<span dangerouslySetInnerHTML={{ __html: marked(state.body, { renderer: r }) }} />

以上がreact + markedown + highlight の使い方になります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away