さよならSyntaxHighlight

さよならCrayon。そしてプラグインのない世界へ…
プラグインを使わずにWordpressをカスタムする何かのお話(たぶん)

さよならCrayon。そしてプラグインのない世界へ…

軽量化を図るためCrayonを裏切り、prism.jsを利用することにしました。
Prism

自分の備忘のためにprismの使い方をば。
DL方法等は他のサイトを参照ください…ではありますが、ひとつだけ。
プラグインの「LineHighlight」と「LineNumbers」は含めておいた方がいい。
あと「commandLine」の「data-user」は萌える。

例に書くことなかったんでCSSとJSの読み込みでも書いておきます。

/**
 * CSSとJSの読込設定
 * @author pnd
 * @since 2018.04.02 
 */
function setScript() {
	wp_enqueue_style( 'syntax', get_template_directory_uri() . '/css/prism.css');
	wp_enqueue_script( 'syntax', get_template_directory_uri() . '/js/prism.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'setScript' );

指定したコードはこんな感じ。

<pre class="line-numbers" data-line="1,3">
    <code class="language-php">
    <!-- ここにコード -->
    </code>
</pre>

基本的には

class=”line-numbers” 行番号を表示する
data-line=”1″ ハイライトする行を指定する。
指定方法は(1-3,5)で1から3行目と5行目をハイライト
class=”language-言語名” 言語を指定する。HTMLの場合はmarkup。
Downloadページでチェックしてる名前書けばOK

唯一の欠点はもう既に自分が何の言語にチェックしたかわからないことですかね。
Fortranとかネタでチェックしたんじゃないか説…

プラグインだとタグを気にせずに書けるのが良い所だったりしますが、
どうせこんな記事書くヤツにpreとかcodeとかわからないヤツいないだろ…と。
そんなわけで、今年も極力プラグインを使わないカスタマイズを進めます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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