WordPress上でコードを「表示する」だけであれば「Syntax Highlighter Evolved」を用いれば良いが、さらにコードを「動かすデモ」を見せたければ「CodePen」を使用する。
See the Pen test by nakanishi (@nakanishi) on CodePen.
Embed→HTML→ソースをC&Pする
まずは保存していることを確認して、Embedからソースを表示し、C&Pする。
WordPress上でコードを「表示する」だけであれば「Syntax Highlighter Evolved」を用いれば良いが、さらにコードを「動かすデモ」を見せたければ「CodePen」を使用する。
See the Pen test by nakanishi (@nakanishi) on CodePen.
まずは保存していることを確認して、Embedからソースを表示し、C&Pする。
参照: 【WordPress】綺麗にソースコードを表示する SyntaxHighlighter Evolvedの使い方 | WordPress College
技術ブログを運営する上で必須となる、Wordpress内での綺麗なコード表示のために、「Syntax Highlighter Evolved」を導入した。基本的な使い方を備忘録として記す。
<div class="red"> </div>
.red { background-color: red; height: 100px; }
次の画像のようにコードをテキストモードで入力し、[スクリプトの種類]コード[/スクリプトの種類]と囲む。また[スクリプトの種類 title=”タイトル名”]コード[/スクリプトの種類]とすることで、冒頭にタイトルを表示することができる。