概要
WordPressでhighlight.jsを使うメモ
ポイント
- マイナー言語にも対応したフルスペックのhighlight.jsを使う –> Custom buildの使用
- テーマが更新されてもhighlight.js設定が消えないようにする –> 子テーマの使用
- フォントがMSゴシックにならないようにする –> カスタムCSSの追加
今回の条件
- WordPressのインストール場所:
/var/www/html/wordpress - テーマ:
vt-blogging - Highlightスタイル:
atom-one-dark
手順
子テーマの作成
- 子テーマのディレクトリ作成
$ sudo mkdir /var/www/html/wordpress/wp-content/themes/vt-blogging-child $ cd /var/www/html/wordpress/wp-content/themes/vt-blogging-child - 子テーマに空の
style.cssを設置$ sudo vim ./style.css
/*
Theme Name: VT Blogging Child
Template: vt-blogging
Version: 1.0
*/
- 子テーマに
functions.phpを設置$ sudo vim ./functions.php
<?php
/**
* Enqueue styles and scripts
*/
function vt_child_enqueue_assets() {
if (!is_admin()) {
// Highlight.js Styles & Script
wp_enqueue_style('atom-one-dark', get_stylesheet_directory_uri() . '/highlight/styles/atom-one-dark.min.css');
wp_enqueue_script('highlightJS', get_stylesheet_directory_uri() . '/highlight/highlight.min.js', [], false, true);
wp_add_inline_script('highlightJS', 'hljs.highlightAll();');
}
// Parent Theme Style
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'vt_child_enqueue_assets');highlight.jsのCustom Buildをダウンロード
- https://highlightjs.org/download
- “Select all languages”にチェック
- ダウンロード
- 解凍
- 解凍して得られた
highlightディレクトリをvt-blogging-childディレクトリ内にコピー
テーマの変更
- WordPressの管理画面から –> 概観 –> vt-blogging-childを選択
フォントの変更
- WordPressのポスト画面から –> カスタマイズ –> 追加CSS –> 以下を追加して「公開」
code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}