WordPressでソースコードを表示するなら?

よく、WordPressやアメブロの設定、使い方を伝える時に「ソースコード」を入れる事が多いんです。ただ、なかなかいい感じで表示できるツールが見つからなくて、色々使ってみたんですけど、イマイチ使い難くて。。。

っでやっと使えそうなのが見つかったので今回ご紹介したいと思います。

ソースコードを表示するプラグイン

検索でよくおすすめしているのが『Crayon Syntax Highlighter』というプラグインです。でも使ってみて思ったのが上手く枠内に表示されなかったり、コピーが出来ない時があったりしました。

その他にも
・Syntax Highlighter
・Prettify

っというプラグインがありますが、私が最終的に良いと思ったのが

WP Code Highlight.js です!!

まずは、インストール

ダッシュボードプラグイン新規追加をクリック。

 

右上にあるプラグイン検索に「WP Code Highlight.js」と入れ、

今すぐインストール有効化を行う。

 

設定方法

ダッシュボード設定WP Code Highlight.jsをクリック。

CDNの設定

「Public CDN:cdnjs(highlightjs.org recommend)」にしてください。

CDNとは?
コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。 そのサーバーが、代わりに配信することで、負荷が分散され、Webサイトの表示速度の向上にもなる仕組みになります。

 

配色設定

こちらのサイトのStylesから好きな配色を選んでください。
https://highlightjs.org/static/demo/

 

私は、Tomorrow Night Blueに設定しています。

移管

私は、WP Code Highlight.jsを使う前は、Crayon Syntax Highlighterを使っていました。Crayon他からの移管がチェックひとつで行ってくれるんです!!

※以前使っていたプラグインは確認後、無効化、削除してOKです

ショートコード設定

こちらにチェックを入れると、 ソースココードを[code]~[/code]で囲むことでソースコード表示ができるようになります。

最後にSaveを行って、全ての設定が終了。

▼見え方としてはこんな感じになります

<div style="line-height: 16.3636px; height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; color: #ffffff; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #fa8072;"><span style="font-size: 16px;">チェック</span></span></div>
<div style="border: 2px solid #fa8072; background-color: #fff5f5; padding: 25px 12px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い</div>

必要な方は是非使ってみてください。

宜しければ、Facebookページに『いいね!』をお願いします

20170423 大阪・あべの
ママでも1日でホームページが作れちゃう講座

~WordPressでシンプル可愛いサイトを作っちゃおう~

コメントを残す

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。