freo(tinymce)でシンタックスハイライト

特定層以外に需要のなさそうなカスタマイズ話。ソースコードをきれいに色分けして見やすく表示(シンタックスハイライト)したい!というカスタマイズです。以前の当サイトでは

なんかを利用していました。ただ前者は使っていた当時、体感的に少し重いような気がしたのと現在は更新停止して数年経過しており、後者は使うときに割と煩雑な手順が必要だったイメージもあり(今調べてみると「google-code-prettify」のほうは今も更新が続けられていて導入もかなり簡単になっているようです)、ほかに何か新しいものはないかなぁと調べてみました。

そこで見つけたのが「prism.js」です。

超軽量でシンプルなprism.js

特徴やメリットデメリット、導入方法は「ほんっとにはじめてのHTML5とCSS3:(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)」に詳しく説明されています。私も参考にさせていただきました。

私がPrismがいいなと思ったのは以下の2点です。

  • 軽量であること
  • ソースコードの記述がW3C推奨の形であること

というわけで早速導入してみました。

Prism導入方法

詳しくは上記で紹介したページをご覧ください。簡潔に言うとPrismからダウンロードしたJSファイルとCSSファイルをアップロードしてfreoのテンプレートファイルに読み込ませるだけです。

「template > header.html」の</head>直前辺り
<link href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}prism.css" rel="stylesheet">​
「template > footer.html」の</body>直前辺り
<script src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}prism.js"></script>

上記のコード例はprism.cssとprism.jsをそれぞれfreoのcssフォルダとjsフォルダに設置した場合の記述です。ファイルを置く場所によって適宜書き換えてください。

実際にソースコードをシンタックスハイライトさせて表示するには<pre>要素の中に <code>要素を入れて、<code>要素に「class属性」で「language-xxxx」という記述で「言語」を指定します。

<pre><code class="language-markup">HTML</code></pre>
<pre><code class="language-css">CSS</code></pre>
<pre><code class="language-js">JavaScript</code></pre>

で、ものぐさな私はこの記述を簡単にできる方法はないもんかと思いました。ありました。

tinymceでソースコードの記述を手軽に

このprism.js、tinymceのプラグインがあるんですね。しかもfreo1.20.0装備のtinymce4にはデフォでついている…(それ以前のものにもあったのかもですが気づいてなかったため解りません)!

「js > admin.js」の//TinyMCEより下

	plugins: [
		'advlist autolink lists link image charmap print preview anchor',
		'searchreplace visualblocks code fullscreen',
		'insertdatetime media table contextmenu paste code'
	],​

codeの後に半角スペース開けてcodesampleと書きます。さらにその下の

	toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

の末尾にも半角スペース開けてcodesampleと追加します。編集済みのadmin.jsを上書きアップロード。ソースコード記述用のボタンが表示されます。

以下にそのボタンを使ってソースコードを記述してる様子の動画を置いておきます(ツールバーに他にも自分でボタンを追加してるので、freoデフォルトの投稿画面と表示が異なるかもしれません)。

簡単簡単~。ただこの方法で生成されるコード、

<pre class="language-markup">
<code>example</code>
</pre>

てなっちゃってるんですよね。W3Cでは<code>にclass属性つけろってなってるんですけど…そこはちょっと気になる。

Recent Entries

2018-01-18
freo設置ディレクトリをルートURLで表示させる
2018-01-16
freo(tinymce)でシンタックスハイライト
2018-01-15
WAF有効でも403エラーを回避する
2018-01-13
お久しぶりです

Categories

Tags

Archives

2018年
01月

Recent Images

  • WAF有効でも403エラーを回避する
  • Photo by ガーリードロップ

Utility Link

Page Top