WordPressでブログ記事内にソースコードを表示させる方法

0108

私もWordPress初心者で色々調べるのにたくさんのブログ記事を見てきました。

色んなブログで見るこれ


<div style="padding: 20px; border: solid 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;">■ここに文章を入力する■</div>

これって何なんだろう? とずっと気になっていましたが、

私も記事を書く側になってみてようやく理解できました。

ブログ記事内にソースコードを書いちゃうと、文章として反映されず、

コードの通りの表示になるのだとか(ブログによってはならないことも?)

それで、ソースコードをブログの記事内に乗せるためのツールが必要だった訳ですね!

こちらはWordPressの

・SyntaxHighlighter Evolved

というプラグインをインストールすることで記事内にこちらのようなコードが作成できます。

このプラグインをインストールしたら、設定のSyntaxHighlighter Evolvedから

バージョンや、デザインの変更などが出来ます。

0111

とりあえず私はバージョン2にしてみました。

そして記事内のテキストエディタの方でこのように記述

0109

CSSやPHPなど、表示したいコードの種類を[]でくくってあげると

間の部分が、記事の方でコードとして表示されます。

↓このような感じに

0110

記事内にてソースコードを説明したい時に有効なプラグインとなっております。

コードの内容を記事内に書きたい!

という方にオススメです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする