[JS] Prism.js でシンタックスハイライト

Prism.js を利用すると、プログラムのコードに色づけをして見やすくすることができます。
https://prismjs.com/

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Prism.js sample</title>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
</head>
<body>
<pre>
    <code class="language-css">p { color: red }</code>
</pre>
</body>
</html>

language-xxx で言語を指定することができます。2023年3月時点で、297言語に対応しています。
https://prismjs.com/#supported-languages

HTMLの場合は language-html、CSSの場合は language-css と指定します。

JavaScriptJavaScript,Prism.js

Posted by kidatti