メモ: Blogger #10：ソースコードをきれいに載せたい(2)

公開：2026.05.09(土) 10:48

Bloggerにソースコードを奇麗に載せたい(2)

※ 過去記事：Blooger #1：ソースコードを綺麗に載せたい

Bloggerにソースコードを載せるため、これまで SyntaxHighlighter というのを使っていたが、かなり前に開発が止まっているようなので、別の手段に変更することにした。
代替として Prism.js というのが良さそうである。

1. CDN

https://cdnjs.com/libraries/prism より、Versionに "1.30.0" を指定、

Style="Styling" を選択、候補の中から好きなテーマのcssを使用。今回は先頭の
　"https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-coy.min.css" を使ってみる。

Style="JavaScript" を選択、とりあえず先頭の
　"https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js"
および、
　"https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js"
というのも使用すると必要な言語を自動的に読み込んでくれるらしいのでこれも使用。

2. 使い方

preタグ→codeタグを作って、codeタグのclass属性で言語を"lang-言語名" の書式で指定
指定可能な言語名は https://prismjs.com/ の "Supported languages" のところに書いてある。
主な言語だと "css"、"javascript"または"js"、"html"または"markup"、といったところか。

使用例：


<pre<code class="lang-html">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
</code</pre>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

"Blogger 設定"

メモ

Blogger #10：ソースコードをきれいに載せたい(2)

Bloggerにソースコードを奇麗に載せたい(2)

0 件のコメント:

その他の記事