Crayon Syntax Highlighterを使って、WordPressで記事中にソースコードを表示する方法
WordPressでソースコードのサンプルを掲載したい時、記事中に直接書き込むと、改行の位置だったり、文字の大きさだったりのせいで、読みにくくなってしまいます。
そこで、役に立つのが、「Crayon Syntax Highlighter」というプラグインです。
このプラグインを使えば、以下のようにソースコードを表示することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function calcTotal() { var startVal = document.getElementById("start").value; var endVal = document.getElementById("end").value; if ( parseInt(startVal) >= parseInt(endVal) ) { window.confirm("最初の数は最後の数よりも小さい数を指定して下さい"); return; } var totalVal = 0; for (var i = startVal ; i <= endVal ; i++ ) { totalVal += parseInt(i); } document.getElementById("total").textContent = "合計値は" + totalVal + "です。"; } |
使い方は簡単です。
Crayon Syntax Highlighterをインストールした状態で、記事投稿画面の「crayon」ボタン押します。
crayonボタンを押下すると、以下のような画面がポップアップで表示されます。
その画面に埋め込みたいソースコードを記述して、「挿入」を押下すれば完了です。
【参考】
【WordPress】投稿記事内にソースコードを綺麗に表示させるプラグイン Crayon Syntax Highlighter】
