プロフィール

Extrose
2002年頃から電脳海にいる。制作ペースは激減したものの今でも現役の作曲者(自称)であり、機会があればBMSも作る。が、最近はVを被ってゲーム実況に勤しんでいる。興味があるものになんでも手を出すのでかなりの趣味を抱えている。

柊雷夜
ユーチューブ地方で見かけるVのすがた (↑)。たまに VRChat にも出る。 VRoid Studio 製。

リリース

個人活動

実績(依頼など)

読み物

[JavaScript] marked.js のコードブロックに色付けする

戻る > エンジニア - Web開発
 関連：[JavaScript] Markdown形式をそのまま Webページとして表示する
 関連：[JavaScript] marked.js のコードブロックに色付けする
 関連：[JavaScript/Node.js] marked のコードブロックを Prism でプリレンダする

概要

marked.js とは Markdown形式の文書をHTMLにパースするライブラリ

コードブロックを記述できるが、標準ではモノカラーで見づらい
それに色付けする方法

実装

JavaScript側はこの実装

// marked.js のインポート
import { marked } from 'https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js';

// marked のオプション「highlight」に設定を行う
marked.setOptions(
    {
      highlight: (code, lang) => {
        return `<pre><code class="language-${lang}">${code}</code></pre>`;
      }
    }
  );

HTML側にも追記が必要

<!-- 
    色付けのテーマ 
    ロードできるテーマの一覧は https://cdn.jsdelivr.net/npm/prismjs/themes/
  -->
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet">

<!-- メインライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>

<!-- 
    表示したい言語ごとにロードする
    ロードできる言語の一覧は https://cdn.jsdelivr.net/npm/prismjs/components/
  -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>

これらを実装すると、当サイトのコードブロックのように色付けができる
ちなみにテーマは prism-tomorrow を採用している

Stoic Sounds 元はExtroseが運営する個人サイト名

プロフィール

リリース

個人活動

読み物

[JavaScript] marked.js のコードブロックに色付けする

概要

実装