Amazonでお得な買い物

【JIN】シンタックスハイライターがC#で動かない?ソースコードを表示するときの注意点

JINには「シンタックスハイライター」というソースコードを綺麗に表示させる機能があります。

さっそくC#コードを表示させるべく利用してみることにしました。

しかし、シンタックスハイライターを有効にしてもソースコードがハイライトされず文字色が黒のままでした。。。

「この機能が使いたくてJINを選んだのに」

と、とても落ち込みました。

C#コードがハイライトされない

せっかく有料版のWordPressテーマを購入したので、このままでは宝の持ち腐れですよね?

そこで、原因の調査と対策を行った結果、prism.jsprism.cssを変更することで無事にソースコードをハイライトさせることができました!

同じ現象に遭遇している方は対策方法を徹底的に説明していきますので是非ご覧になってくださいね!!

尚、この方法はJIN公式の方法ではないので自己責任でお願いします

この記事はこんな人おすすめ
  • シンタックスハイライターにC#コードを適用させる方法
  • ソースコードの配色を変更する方法
目次

JINのシンタックスハイライターとは?

JINの特徴として、各種プログラミング言語のソースコードをハイライトできる機能が「シンタックスハイライター」です。

コードサンプルを使ってコードを入力すると背景色や文字色が変わるので全体的にコードが見やすくなります。

VSCodeなどの開発環境を利用しているとわかるのですが、ソースコードを書いているときに型や関数名に色分けされてハイライトされている状態は見た目以上に読者にとってコードを理解しやすくすることができます。

JINのシンタックスハイライターの設定手順

JINのシンタックスハイライターはWordPressから簡単に設定することができます。

1.外観カスタマイズを選択

2.その他設定からコードのシンタックスハイライターを利用するにチェックを入れる

JINのシンタックスハイライター

JINのシンタックスハイライターを動かした結果

実際にJINのシンタックスハイライターを動かしてみると、想像していた結果とは異なる表示になっていました。

C#のコードサンプルが配色されない

想像していた結果は対策後の表示になりますので、結果的にはこのようにソースコードがハイライトされます。

画像はC#コードを埋め込んだ状態です。

予想していた結果
予想したソースコード表示

対策前の結果は文字色が全て黒色の表示になってしまっていました。これだと、さすがに見にくいですよね?

実際の結果
実際のソースコード表示

Pythonなどの言語はどうか?

試しにPythonのコードサンプルを埋め込んだところ、キレイに配色されていました。

# coding: utf-8

print "こんにちは"

どうやら、PythonやPHP、HTML、Javaなどのメジャーな言語ではシンタックスハイライターがうまく機能しているようです。

  • シンタックスハイライターはC#非対応だった
  • PythonやPHP、HTML、Javaなどのメジャーな言語は対応している

シンタックスハイライターの対応

いろいろ調べていくと、JINのシンタックスハイライターにはPrism.jsの設定ファイルを加工利用していることがわかりました。

今回修正するファイル
  • prism.css
  • prism.js

この2つのファイルはPrism.jsのサイトからダウンロードすることができます。

prism.cssソースコードをハイライトするための配色情報です。

Prism.jsのサイトからは8種類の配色をダウンロードできるので、好みの配色を選びましょう。ちなみに、JINはDefaultを利用しているので、もしDefaultを選択される場合はprism.cssのダウンロードは不要になります。

Prism.jsのThemes
配色の種類
  • Default
  • Dark
  • Funky
  • Okaidia
  • Twilight
  • Coy
  • Solarized Light
  • Tomorrow Night

Default

DefaultはJINで使用されている配色です。落ち着いた色で好みなので当ブログでも採用しました。

特にこだわりがなければDefaultはオススメです。

Defaultの表示

Dark

レトロな感じの色合いですね。海外のサイトでたまに見たりすることがあります。

Darkの表示

Funky

文字列以外は縞模様にする仕様です。コントラストを重視したい方にはおススメです。

Funkyの表示

Okaidia

Okaidiaは背景が黒で最近流行りの配色になります。

最近のiOSやmacOS Catalinaで実装されたブラックモードで表示させると違和感無く表示できますよ。

Okaidiaの表示

Twilight

こちらもOkaidiaと同様黒背景ですが、配色はOkaidiaほど多くないのが特徴です。

シンプルさを求める人にオススメです。

Twilightの表示

Coy

Defaultと同様に安心感があって私好みの配色です。

Defaultと異なるのは偶数/奇数行で背景色にコントラストを付けていることです。

Coyの表示

Solarized Light

Solarized Lightは最もシンプルな配色になっていますが、使っている人をあまり見たことがないです。

Solarizedの表示

Tomorrow Night

OkaidiaやTwilightと同様黒背景になります。

Tomorrow Nightの表示

prism.cssをJINに適用させる

ダウンロードしたprism.cssをJINに適用させます。

prism.csswp-content/themes/jin/cssフォルダにありますので、元々あるprism.cssをバックアップした上で、ダウンロードしたprism.cssを上書きしましょう。

尚、Defaultの配色を利用する場合はprism.cssのダウンロードは不要になります。

C#コードをprism.jsに追記してJINに適用させる

JINのprism.jsにC#を適用させます。

Prism.jsサイトのダウンロードしたprism.jsを適用させてもいいのですが、私が試したところ、Prism.jsサイトのprism.jsだとJINのシンタックスハイライターのコピー機能が使えなくなってしまいました。

コピー機能が使えない

そのため、私はJINデフォルトのprism.jsを編集することにしました。
こちらのコードをコピーしてprism.jsの最後の行に追加して、ファイルを上書きしましょう。尚、prism.jswp-content/themes/jin/jsにあります。

最後の行にコードを追加

サンプルコードはこちらにあるので参考にしてみてください

!function(){if("undefined"!=typeof self&&self.Prism&&self.document){if(!Prism.plugins.toolbar)return console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."),void 0;var o=window.ClipboardJS||void 0;o||"function"!=typeof require||(o=require("clipboard"));var e=[];if(!o){var t=document.createElement("script"),n=document.querySelector("head");t.onload=function(){if(o=window.ClipboardJS)for(;e.length;)e.pop()()},t.src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js",n.appendChild(t)}Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){function n(){var e=new o(i,{text:function(){return t.code}});e.on("success",function(){i.textContent="Copied!",r()}),e.on("error",function(){i.textContent="Press Ctrl+C to copy",r()})}function r(){setTimeout(function(){i.textContent="Copy"},5e3)}var i=document.createElement("a");return i.textContent="Copy",o?n():e.push(n),i})}}();

C#に適用させるためには、Prism.languages.******csharpと入力する必要があります。

Prism.languages.csharpを追加する

JINのデフォルトのprism.jsファイルにはJaveScriptやHTML、Cコードなどのプログラミング言語は対応しているようでしたが、C#は含まれていませんでした。


▼JINデフォルトのシンタックスハイライターに適用済みの言語はこちら▼

  • JavaScript
  • PHP
  • CSS
  • C
  • Python
  • HTML

まとめ

JINのシンタックスハイライターはとても便利な機能なので、上手く機能しないという方は試してみる価値ありです。

今回の対策をすることでソースコードのデザインを綺麗に見せることができました!

C#のプログラミングも随時アップしていきますので、是非ご覧になってくださいね!!

よかったらシェアしてね!

この記事を書いた人

インドア派で体育会系のソフトウェアエンジニアです。
普段はパソコンをしながらコーヒーを飲むのが至福の時間です。
日々の生活を快適にするための情報を随時アップしていきます。

コメント

コメントする

目次
閉じる