highlight.jsを使ってコードをVSCode風に見せる方法。WordPressのSANGOで実践。

今回は、ワードプレスにhilight.jsを入れてコードをきれいに見せる方法をやってみたので、備忘録的に書いておきます。

特にVS Code風というのが探しても出てこなくて、ゼロからやるより、CSSの修正が大幅に楽になるはずです。

まずはテーマの編集

highlight.jsのコードを追記する方法

以外とテーマの編集って最初は勇気がいるけど、慣れれば全然怖くありません。

今回は特に簡単な作業なので、慣れていない方は、テーマ編集の第一歩としてもぜひトライしていただきたいです。

注意
テーマの編集は、あくまで自己責任で行ってください。エラーが発生しても責任は追えません。簡単な作業ですが、うっかり壊してしまうかもしれませんので、Wordpressが全くの初心者の方は控えた方がいいかもしれません。

まずは、テーマの編集画面へ。

wordpress 外観 テーマエディター

続いて、子テーマが選択されているか、確認しましょう。

SANGOであれば、SANGO childというのが選択されていればOKです。

wordpress function 子テーマ

続いて、テーマのための関数(function.php)を選択します。

上の赤丸の部分ですね。

そうしたら、以下のコードを記述していきましょう。

【// ここから下のコードを追加】と書いている部分より下の記述を追記します。

<?php
//子テーマのCSSの読み込みクエリ付き
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
  function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('sng-stylesheet','sng-option') );
    // ここから下のコードを追加
    wp_enqueue_script('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js', [], '9.14.2', true );
    wp_enqueue_script( "code-customize.js", get_stylesheet_directory_uri() . '/code-customize.js', '', [], '1.0', true );
}

そうするとこんな画面になるはずです。

子テーマ function highlightjs

これで何ができるようになったかと言うと、

「CDNのhighlightjsの読み込み」「highlightjsの初期化スクリプトファイルの読み込み」ができるようになりました。

詳しく分からなくても問題ありません!

highlight.jsのスクリプト作成していきます。

続いて、jsファイルの作成です。

使っているエディターで、jsファイルを作成します。

ちなみに僕はVSCodeを使っています。

それでは、エディターの新規ファイルに以下の記述を記載します。

hljs.initHighlightingOnLoad();

VSCodeだとこんな感じです。

ファイル code-customizejs highlightjs
注意
先の子テーマのfunction.phpの記述に合わせるため、必ず、スクリプトのタイトルは、「code-customize.js」としてください。

非常に簡単ですね。

続いてFTPサーバーに接続して、このスクリプトをWordPressのフォルダに突っ込みましょう。

スクリプトを入れる場所は、同じくSANGOの子テーマです。

自分のwordpress → public_html → wp-content → themes →sango-theme-child

と進めていけばフォルダが見つかるはずです。

こんな感じで、sango-theme-childのフォルダに、code-customize.jsが入っていれば、OKです。

FTP ファイル code-customizejs

子テーマにCSSのシンタックスハイライトのスタイルを追記。

スタイルについては、今回は僕が普段使っているエディターであるVS Codeの見た目を真似て作成しました。

Atomがいいという方はこちらのサイトが非常に参考になります。

(僕もAtomの見た目がけっこうかっこいいなと思って悩みました。)

参考 【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法ゆうやの雑記ブログ

では実際に、CSSの記述を書いていきます。

今回も子テーマのCSSにコードを書いていきます。

(ちゃんと子テーマが選択されているかを念のため、確認しましょう。)

今度は、スタイルシート(style.css)を選択してください。

wordpress スタイルシート 子テーマ

以下のCSSを今ある、記述の下にそのままコピペします。

#content .hljs{
    display:block;
    overflow-x:auto;
    padding:.5em;
    background:#1e1e1e;
    color:#dcdcdc
}

#content .hljs-keyword,.hljs-literal,
#content .hljs-name,
#content .hljs-symbol{
    color:#569cd6
}

#content .hljs-link{
    color:#569cd6;
    text-decoration:underline
}

#content .hljs-built_in,
#content .hljs-type{
    color:#4ec9b0
}

#content .hljs-class,
#content .hljs-number{
    color:#b8d7a3
}

#content .hljs-meta-string,
#content .hljs-string{
    color:#d69d85
}

#content .hljs-regexp,
#content .hljs-template-tag{
    color:#9a5334
}

#content .hljs-formula,
#content .hljs-function,
#content .hljs-params,
#content .hljs-subst,
#content .hljs-title{
    color:#dcdcdc
}

#content .hljs-comment,
#content .hljs-quote{
    color:#57a64a;
    font-style:italic
}

#content .hljs-doctag{
    color:#608b4e
}

#content .hljs-meta,
#content .hljs-meta-keyword,
#content .hljs-tag{
    color:#9b9b9b
}

#content .hljs-template-variable,
#content .hljs-variable{
    color:#bd63c5
}

#content .hljs-attr,
#content .hljs-attribute,
#content .hljs-builtin-name{
    color:#9cdcfe
}

#content .hljs-section{
    color:gold
}

#content .hljs-emphasis{
    font-style:italic
}

#content .hljs-strong{
    font-weight:700
}

#content .hljs-bullet,
#content.hljs-selector-attr,
#content.hljs-selector-class,
#content.hljs-selector-id,
#content.hljs-selector-pseudo,
#content.hljs-selector-tag{
    color:#d7ba7d
}

#content .hljs-addition{
    background-color:#144212;
    display:inline-block;
    width:100%
}

#content .hljs-deletion{
    background-color:#600;
    display:inline-block;
    width:100%
}

.entry-content pre {
    border: none;
    padding: 0;
    background: #fff;
  }
  .entry-content code,
  .entry-content .haiiro{
    border-radius: 0 5px 5px 5px;
  }
  

長いので、頭の部分だけですが、こんな感じになっているはずです。

wordpress スタイルシート highlightjs

これで、バッチリ、コードがVSCode風になっていると思います。

すでに記事を書かれている方は、ちゃんと変更がされているかチェックしてみてください。

もし変更されていない場合は、ブラウザのキャッシュのクリアも一度試してみるといいかもしれません。

先にもご紹介しましたが、以下のサイトを参考にさせていただきました。本当にありがとうございます!

参考 【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法ゆうやの雑記ブログ

まとめ

あまり慣れてない方でも、簡単にできるように詳しく書いてみました。

ATOM風と比べて、だいぶシンプルな見た目ですが、これはこれで見やすくていいかなと思います。

カラフルだと、コードの説明が長くなりがちな僕の記事だと、ガチャガチャしてうるさいかなと思ったからです。

コメントを残す

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

CAPTCHA