プラグインを使用せずPrism.jsでコードをハイライト表示する

2018-01-02 20:00カスタマイズ

prismjs以前、プラグインの記事では紹介しましたが、やはり扱いやすさでプラグインなしに落ち着いています。

今回は覚え書きも兼ねてご紹介します。

Prism.jsでコードをハイライト表示する(準備編)

ダウンロードする

右上のDOWNLOADボタンをクリックする

prismjs-download

Compression level:(圧縮レベル)を選択する

下の縮小版を選択します

Compression level

テーマ(Themes)を選択する

テーマ名をクリックするとデザインサンプルが確認できます

prismjs-theme

言語を選択する

必要な言語にチェックを入れます

prismjs-Languages

プラグインを選択する

プラグイン名をクリックするとサンプルが確認できます

prismjs-Plugins

私が選んだものです
  1. Line Highlight 指定した行の色を変える
  2. Line Numbers 行番号を振る
  3. Previewer: Color(Previewer: Base)カラーをポップアップ表示する

JSとCSSをそれぞれダウンロードする

画面下のボタンをそれぞれクリックしてローカルに保存します

Prismjs download button

サイトで使えるようにする

ファイルをアップロードする

保存した「prism.css」と「prism.js」をサーバーの子テーマ内にアップロードします

add-header.php内に記述する

「Luxeritas」→「子テーマの編集」→「Head タグ」を開き下のように記述します
※アップロード先は書き換えてください
<link rel="stylesheet" type="text/css" href="/wp/wp-content/themes/luxech/prism.css" media="all" />
<script type="text/javascript" src="/wp/wp-content/themes/luxech/prism.js"></script>

Prism.jsでコードをハイライト表示する(実践編)

HTMLの場合

※ language-markup と記述する

行番号なし

<pre><code class="language-markup">ここに記述する<code></pre>

行番号あり

<pre class="line-numbers"><code class="language-markup">行番号を振る場合<code></pre>

CSSの場合

※ language-css と記述する

<pre class="line-numbers"><code class="language-css">
/* デフォルト新着記事一覧表示 */
#side .widget_recent_entries ul li:before {
	font-family: FontAwesome;
	content: "\f09e";
	margin-right: 7px;
	display: inline-block;
	color: #E44D26; /* アイコンの色 */
}
</code></pre>

(表示結果)

/* デフォルト新着記事一覧表示 */
#side .widget_recent_entries ul li:before {
	font-family: FontAwesome;
	content: "\f09e";
	margin-right: 7px;
	display: inline-block;
	color: #E44D26; /* アイコンの色 */
}

指定した行の色を変える

<pre class=”line-numbers” data-line=”3-4″> と入力する
/* デフォルト新着記事一覧表示 */
#side .widget_recent_entries ul li:before {
	font-family: FontAwesome;
	content: "\f09e";
	margin-right: 7px;
	display: inline-block;
	color: #E44D26; /* アイコンの色 */
}

指定した行番号から表示する

<pre class=”line-numbers” data-start=”4″> と入力する
/* デフォルト新着記事一覧表示 */
#side .widget_recent_entries ul li:before {
	font-family: FontAwesome;
	content: "\f09e";
	margin-right: 7px;
	display: inline-block;
	color: #E44D26; /* アイコンの色 */
}

あとがき

ふぅ疲れたぁ!
これでハイライト表示の記事、3つめやんw
結局これがオススメです!
ただ、コードを簡単に入力するには、プラグインAddQuicktag が必須です。

0

Posted by どらみ