【WordPress】ソースコードをテキストエディタ風に記事に埋め込む方法

スクリーンショット 2015-05-17 22.34.47

どうも@ちゃっぺです!

WordPressやPHPなどのテクニックを紹介する記事でよく画像のようなテキストエディタ風にソースコードが紹介されているのをみたことないですか?!
どうやってるんだろと思って調べてみたら以外に簡単でした!今回はその方法を紹介したいと思います。

スポンサーリンク

プラグイン「SyntaxHighlighter Evolved」を入れよう!

プラグインの検索で「SyntaxHighlighter Evolved」を検索します。

スクリーンショット 2015-05-17 22.10.07

似たような名前のものがたくさんありますが、「SyntaxHighlighter Evolved」です。

プラグインをインストールしたら、有効化しましょう!これで導入は終了です!

使ってみる

対応コードは以下の通りです。対応コードはタグに色がつきます。

html,actionscript3,bash,coldfusion,cpp,csharp,css,
delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,
matlab (keywords only),objc,perl,php,text,powershell,
python,r,ruby,scala,sql,vb,xml

私はhtmlくらいしかつかっていませんが、RubyとかPHP、javascriptももちろん対応しています。
使い方は簡単♪百聞は一見にしかず。

[html]
<p>どうも@ちゃっぺです!</p>
<p>パソコン新調しました♪</p>
[/html]

こんな風にコードを書くと以下のように表示されます!

どうも@ちゃっぺです!
パソコン新調しました♪

これでできました!簡単です♪

スポンサーリンク

デザイン

デザインはWordPressのメニューの「設定」から編集できます。(右メニューの「設定」→「SyntaxHighlighter Evolved」)

スクリーンショット 2015-05-17 22.25.19

設定のテーマの項目で変更できます。最初は「Default」に設定されています。

スクリーンショット 2015-05-17 22.34.47

「Django」に設定すると。。。

スクリーンショット 2015-05-17 22.36.30

他にも「emacs」だとこんな感じ。

スクリーンショット 2015-05-17 22.35.23

全部で7種類のテーマがあります。

他の設定

左側の行番号とかハイライトとかを設定できます!これは多用しそうです。

[html highlight=”2″]と書くと2行目がハイライト表示されます。

[html highlight=”2″]
<p>どうも@ちゃっぺです!</p>
<p>パソコン新調しました♪</p>
[/html]

どうも@ちゃっぺです!
パソコン新調しました♪

[html firstline=”28″]と書くと行番号が28になります!

[html firstline=”28″]
<p>どうも@ちゃっぺです!</p>
<p>パソコン新調しました♪</p>
[/html]

どうも@ちゃっぺです!
パソコン新調しました♪

こんな感じ。で行番号が変更できます!

他にも設定のページで以下の設定もできます。

行番号を表示する
・ツールバーを表示する
・リンクを有効にする
・コードボックスの表示を閉じておく
・軽い表示モードを使う
・インデントタブを許容するスマートタブを使う
・長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

いまのとこ私は使ってません笑

まとめ

簡単なんでぜひ使ってみてくださいね。

もうWordPressも全盛期(衰退期?)なんで大体なんでもプラグインでありますね!

この記事を読んでいただいてありがとうございます!

だんだん!

この記事が気に入ったら
いいYo!しよう

著者にYoが届いて喜びます(/▽゚\)

→「いいYo!」ってなあに?

Twitterでちゃっぺをフォローしよう!

スポンサーリンク
ad_pc1
ad_pc1

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>