Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@inatatsu_csg

react + marked + highlight の設定や拡張

More than 1 year has passed since last update.

はじめに

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

今回は前回に続いて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 の使い方になります。

3
Help us understand the problem. What is going on with this article?
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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?