ブログにショートコードを表示させよう

楽しんでいただけましたか?シェアしていただけると励みになります。

プラグインを入れる

今回は、「SyntaxHighlighter Evolved」というプラグインを入れてみました。検索で出てくると思います。

有効化して、設定で表示スタイル(色)などが選べるようですが、僕はデフォルトのままです。

ショートコードを表示する

実際に表示させてみます。投稿時の画像もあるのでよかったらどうぞ。

画像クリックで拡大表示されます。

普通にCSSコードを表示する場合

/* #Basic Styles */
body { font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”,
“MS Pゴシック”, “MS PGothic”, sans-serif;
font-size: 15px;color: #666;-webkit-text-size-adjust: 100%;line-height: 18.5px;}
html{ min-height: 100%; }

syo-toko-do1

ハイライトする場合

/* #Basic Styles */
body { font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”,
“MS Pゴシック”, “MS PGothic”, sans-serif;
font-size: 15px;color: #666;-webkit-text-size-adjust: 100%;line-height: 18.5px;}
html{ min-height: 100%; }

syo-toko-do-2

見出しを入れる場合

 /* #Basic Styles */ body { font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”,
“MS Pゴシック”, “MS PGothic”, sans-serif;
font-size: 15px;color: #666;-webkit-text-size-adjust: 100%;line-height: 18.5px;}
html{ min-height: 100%; }

syo-toko-do-3

参考サイトはこちらです。

SyntaxHighlighter Evolved – 記事にソースコードを綺麗に表示するWordPressプラグイン | ネタワン

スポンサーリンク

楽しんでいただけましたか?シェアしていただけると励みになります。

フォローしていただけると嬉しいです!

スポンサーリンク