wordpressでプラグインなしでシンタックスハイライトするprism.jsが最強すぎるよ

コードを表示するに当たって、シンタックスハイライトする方法探してたんですよ。

Crayon Syntax HighlighterとかSyntax Highlighter Evolved使ってみたけど、イマイチしっくり来なくてなんかないかなーと探していたところ。

prism.jsというものを発見!見た瞬間にこれだ!となりましたね。

prism.jsってなに?どうやって導入するの?

prism.jsを公式ページからダウンロードしてサーバーに直接アップロードしたんだけど、プラグインもあるみたい。めんどくさい人はそっちの方がいいかもよ。

Prism Highlight

Prism Syntax Highlighter

試してないので、どっちがいいかとかはわからん。試して見てね。

 

まずは、公式ページからダウンロード。

こちらにアクセス→http://prismjs.com/download.html

なんか色々自分の欲しいものを選択を選択してダウンロードと無駄がない。シンタックスハイライトのプラグイン重かったんだよね…こういうところありがたいですね。

僕の場合は、こんな感じ。

Development versionは開発中みたいな?最新版!て感じ。

Minified versionってのはたぶん、名前の通り軽いバージョンみたいなことだと思う。

まあ特にこだわりがない人は、Minified versionを選んでおけばokのはず。

 

で次は、テーマ。どんな風にコードを表示したいかってことだね。

prism.jsのテーマを選択!

2017年4月現在は、7種類。

  • Default

  • Dark

  • Funky

  • Okaidia

  • Twilight

  • Coy

  • Solarized Light

僕は、Defaultかcoyで迷ったけど、defaultにしといた。そのうちまた変えるかも。

 

使うプログラミング言語の選択

いろいろあるから自分の載せたい言語を選択!

 

プラグインの選択

あとは追加機能みたいなやつ。

 

僕が選択したのは、

  • Line Highlight
  • Line Numbers
  • Show Language
  • Command Line

それぞれ説明していくよ。

まず、使い方なんだけどJavaScriptだったらこんな感じ。

<pre><code class="language-javascript">
// コード
</code></pre>

んじゃ、Line Highlightの使い方について。     Line Highlightってのは、指定したところを目立たいときに使うやつ。

<pre data-line="1-5"><code class="language-javascript">
(function(){

if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) {
	return;
}

function $$(expr, con) {
	return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

function hasClass(element, className) {
  className = " " + className + " ";
  return (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(className) > -1
}

</code></pre>

Line Numbersは名前の通り、行番号を出力するやつ。

<pre class="line-numbers"><code class="language-javascript">
</code></pre>

 

ってすれば、行番号を出力してくれる。

show languageとcommand lineはそのまんまね。詳しくは、公式ページで見てくださいな(めんどくさくなった…ごめんね。)

 

全部選択し終わったら、いざprism.jsとprism.cssをダウンロード。

wordpressに突っ込むぞ

pism.jsを置く場所。

ダウンロードしたやつをアップロードするんだけど、どこに置いたら正しいかとかはよくわからんので、とりあえずテーマの中に入れといた。

僕の場合は、Affinger4なので、こんな感じ。

Affinger4-child(テーマ名) /js/prism.js

Affinger4-child (テーマ名)/css/prism.css

このやり方だと、テーマ変えたら反映されなくなっちゃうので注意。

ただアップロードしただけじゃ意味がないので、wordpressに読み込ませます。

テーマのヘッダー部分に以下をコピペ!(目立ってる部分)

...(いろいろ書いてあるはず)
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/prism.js"></script>
</head>

 

これで設定は全部完了!と思いきや。記事に挿入するのがめんどくさい。

毎回、<pre class=”line-numbers”><code … とかやってらんねよ。ファっk!ってことでショートコードを設定する。

functions.phpに書いてもいいと思うんだけど、めんどいので、addQuickTagってプラグインを使う。

 

AddQuickTagでショートコードを設定!

こんな感じ!

開始タグと終了タグを設定してチェックつけるだけ!言語もわざわざ書くのめんどいから、ショートコードにjsってつけて、すぐ書けるようにした。

こんなもん!便利になったもんだ。

 

以上!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください