カテゴリー: Wordpress

WordPress上でコードを「表示する」だけであれば「Syntax Highlighter Evolved」を用いれば良いが、さらにコードを「動かすデモ」を見せたければ「CodePen」を使用する。

See the Pen test by nakanishi (@nakanishi) on CodePen.

Embed→HTML→ソースをC&Pする

まずは保存していることを確認して、Embedからソースを表示し、C&Pする。

 

 

参照： 【WordPress】綺麗にソースコードを表示する　SyntaxHighlighter Evolvedの使い方 | WordPress College 

技術ブログを運営する上で必須となる、Wordpress内での綺麗なコード表示のために、「Syntax Highlighter Evolved」を導入した。基本的な使い方を備忘録として記す。

<div class="red">
</div>

.red {
background-color: red;
height: 100px;
}

「テキスト」入力モードで普通にコードを入力し、タグで囲む

次の画像のようにコードをテキストモードで入力し、[スクリプトの種類]コード[/スクリプトの種類]と囲む。また[スクリプトの種類 title=”タイトル名”]コード[/スクリプトの種類]とすることで、冒頭にタイトルを表示することができる。