Lion Blog, Lion Mediaでsyntax hilight via Prismjs - ぶやかー

• Facebook
• Twitter
• はてブ
• LINE
• Pocket

Lion Blog、Lion Mediaのコードブロックが残念なうえに、syntaxhilight系のプラグインはどれも相性悪い
なので、素直にjsとcss指定して入れたほうがよい。

さらに、基本的にはCDNの方が良いのだけど、特殊な環境下（CDNにアクセスできない環境）の場合はローカルに入れておく必要がある。

Prismjsのダウンロードと配置

https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript

好きなの選んでjavascriptとcssをダウンロードする。

ちなみにpluginは、Show Language, Copy to Clipboard Button, Toolbar, Autoloaderあたりはとりあえず入れてみる

wordpressのディレクトリにprismディレクトリ作ってそこにダウンロードしたcssとjsのファイルを全部配置
オーナーをwww-dataにしておく

sudo mkdir /var/www/wordpress/prism
sudo chown -R www-data. /var/www/wordpress/prism

Lion Mediaの設定

CDNの場合はアドレス置き換えればOK

外観 > カスタマイズ > 高度な設定

■直上の自由入力エリア

<link rel="stylesheet" href="/prism/prism.css"/>

■直上の自由入力エリア

<script src="/prism/prism.js"></script>

外観 > カスタマイズ > 追加 CSS

/// 参考にさせてもらいました。ありがとう。
https://threefrog.com/how-to-highlight-source-code-lion-media/

/*codeタグ内の装飾*/
code.hljs {
    display: block;
    font-size: 12px;
    overflow-x: auto;
    padding: 1em;
    background: #fafafa;
    -webkit-text-size-adjust: none;
}
/*preタグ内の装飾*/
.content pre {
    font-family: ,"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 400;
    font-size: 1.4rem;
    margin-top: 20px;
    padding: 20px;
    background-color: #fafafa;
    border-left: none;
    border-radius: 10px;
    color: #8B4513;
    overflow: auto;
}

• Facebook
• Twitter
• はてブ
• LINE
• Pocket