今度こそ、長年愛用してきた iG:Syntax Hiliter とおさらばすることになりそう。
寂しい＞＜
前回
公式：Prism
【環境】
PrismJS: 1.9.0
導入
設定
公式サイトの ダウンロードページ にて設定。
わけも分からず、欲張って入れたので
Total filesize: 146.01KB (96% JavaScript + 4% CSS)
あちゃーｗ
（）内は、<code class=”language-xxxxx”> の xxxxx に設定すべき値。
公式：Supported languages
- Compression level:
- カスタマイズをしたいので、[Development version] を選択
- Core
- Themes
- Languages
- Markup（markup）
- CSS（css）
- C-like（clike）
- JavaScript（javascript）
- ActionScript（actionscript）
- Apache Configuration（apacheconf）
- AppleScript（applescript）
- Bash（bash）
- BASIC（basic）
- Batch（batch）
- C（c）
- C#（csharp）
- C++（cpp）
- CoffeeScript（coffeescript）
- Diff（diff）
- Docker（docker）
- Git（git）
- Go（go）
- Haskel（haskell）
- HTTP（http）
- ini（ini）
- Java（java）
- JSON（json）
- Less（less）
- Markdown（markdown）
- nginx（nginx）
- Objective-C（objectivec）
- PHP（php）
- .properties（properties）
- Python（python）
- Ruby（ruby）
- Sass (Sass)（sass）
- Sass (Scss)（scss）
- Scala（scala）
- Smarty（smarty）
- SQL（sql）
- Stylus（stylus）
- Swift（swift）
- Textile（textile）
- Twig（twig）
- TypeScript（typescript）
- VB.Net（vbnet）
- vim（vim）
- Wiki markup（wiki）
- YAML（yaml）
- Plugins
- Line Highlight
- Line Numbers
- Autolinker
- Show Language
- JSONP Highlight
- Highlight Keywords
- Remove initial line feed
- Command Line
- Unescaped Markup
- Toolbar
Blogger.comにPrism.jsをCDNで導入する（2020-11-20）
DL
ページ下部より .js と .css を個別に DL。
配置
テーマディレクトリ内に配置。
/theme_directory/css/prism.css
/theme_directory/js/prism.js
WordPress へ組み込み
/wp-includes/functions.php
こちらだと、WordPress をアップデートする度に下記設定が消えてしまうので
/wp-content/themes/[theme_name]/functions.php
へ、下記を追加。
nobbi LABO：WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス（2017-03-27）
/*---------------------------------------------------------
* Prism.jsの呼び出し
----------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'startPrism' );
function startPrism() {
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20171206', true );
}
利用
書式
<pre>
<code>
</code>
</pre>
この中にコードを書くだけ。
メタ文字
HTML タグなどは、そのまま書くとおかしくなるので
調整が必要。
エスケープ（サニタイズ）
Syncer：HTML Escape / Unescape
mwSoft Tools：HTMLエスケープ（サニタイズ）ツール
スクリプト扱い
公式：Unescaped markup
<script type="text/plain" class="language-markup">
<p>Example</p>
</script>
と書かれていたけど、実際にやってみるとうまく表示されない。
コメント化
公式：Unescaped markup
<pre class="language-markup"><code><!--
<p>Example</p>
--></code></pre>
と書かれていたけど、実際にやってみるとうまく表示されない。
改行
個人的には、下記のように、code タグとコード本文は改行して記述したいのだけど
<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<script type="text/plain" class="language-markup">
<p>Example</p>
</script>
</code>
</pre>
このように記述すると、下記のごとく、
という見た目になってしまう。
<script type="text/plain" class="language-markup">
<p>Example</p>
</script>
なので、
<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<script type="text/plain" class="language-markup">
<p>Example</p>
</script></code>
</pre>
HTML（MarkUp）
上記改行も考慮しつつ試した結果
最初と最後の行をコメント識別子と同じ行に記述する。
<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup"><pre class="language-markup"><code><!--<script type="text/plain" class="language-markup">
<p>Example</p>
</script></code>
</pre>-->
class
<code> へ class=”language-xxxxx” と指定。
<pre>
<code class="language-xxxxx">
</code>
</pre>
xxxxx に書くべきワードは、上述。
行番号
pre タグへ data-line 属性を記述。
出力行
class=”command-line” 時に data-output 属性を記述して、行番号を指定することで
当該行へプロンプトを出さないように指定できる。
data-filter-output
data-filter-output 属性を記述して、任意の文字列を指定することで
当該行へプロンプトを出さないように指定できる。
行数が多かったり、後で変更が入ったときなど
行番号を指定するのはナンセンスな場合に有効。
参考サイト
打ち聞かせ：シンタックスハイライター Prism JS を使用する（2019-01-20）コマンドライン表示する（ Command Line plugin ）
サンプル
クラスの設定方法
公式：Different markup
言語毎のサンプル
公式：Per language examples
カスタマイズ
言語表記
下記優先順位にて決定される。
- <pre data-language=”xxxxx”>
- var Languages に定義されている内容
- <code class=”language-xxxxx”>
<code class=”language-xxxxx”> の xxxxx の部分に
prism.js 内に定義されていない語句を書けば、
Plain Text と判断されて、文字色は白一色となり
言語名は、xxxxx がパスカライズされる。
文字サイズ
言語表記が小さいと感じたので、font-size を修正。
pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
color: #bbb;
/* font-size: .8em; ← コメントアウト */
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
行ハイライト
.line-highlight {
position: absolute;
left: 0;
right: 0;
padding: inherit 0;
margin-top: 1em; /* Same as .prism’s padding-top */
background: hsla(24, 20%, 50%,.08);
- background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+ background: linear-gradient(to right, rgba(255, 255, 0, .3) 70%, rgba(255, 255, 0, 0));
138行目。
hsla はピンとこないので、rgba に書き換えて、アルファ値を調整した。
文字色
諸々調整。