WordPressでソースコードを綺麗に表示させる
公開日:
:
WordPress
いろいろとSTINGERをカスタマイズしたいのですが、それと共にブログも書こうと思っています。
そんな時、どうしてもソースコードを表示することになります。また今後このブログでAndroidやjavaのコードを書くこともあるかと思います。
そこでソースコードを綺麗に表示させるにはどうすればいいんだろう、と探してみた結果、ありましたよプラグインが。
WordPressってのはそういうのがいろいろとあって便利ですね。ようやくみんなに使われてる意味がわかりました(今更)
最初にやろうとしていることからどんどん横道に逸れていってる気もしますが気にしない。たどり着く先は一緒のはずだ。(ドヤ顔)
目次
Crayon Syntax Highlighter
他にもいくつかプラグインがありますが、これの見た目が一番綺麗ですし安定してるみたいなのでこれ使ってみたいと思います。
Crayon Syntax Highlighterのインストール
簡単です。頭空っぽでもできます。CSSとかPHPとかでPP(プチパニックの略byDAIGO)起こしてる頭に差し込む一滴の清涼剤です。
WordPressのプラグインから新規追加で「Crayon Syntax Highlighter」を検索。
↓
今すぐインストール
↓
プラグインを有効化
↓
終了
Crayon Syntax Highlighterの設定
インストールが終わったら設定ですが、デフォルトで問題なさそうです。適当に変えてください。
設定のCrayonで設定できます。プレビューを見ながら色々と試してください。
ソースコードの貼り付け
こちらも簡単。
WordPressのテキストエディタでcrayonのボタン押すだけ。
ソースをコピペして挿入すると
↓こうなります。
1 2 3 4 5 6 |
<!--テスト--> <h4 class="menu">harufathについて</h4> <div class="textwidget"><img src="http://harufath.com/image.jpg" width="150" height="150" class="float-left" style="margin:0px 14px 0px 12px;"> <ul><li>Androidアプリ勉強中のはずが、どんどん手を広げていって収拾が付かなくなってきた40歳。!<br /><br />⇒ <a href="http://harufath.com/profile/">harufath.comとは</a><br /></li></ul> </div> |
これでソースを含んだブログが書ける様になりました。
サイドバー
関連記事
-
STINGER3のサイドバーの新着記事欄をそれなりにカスタマイズする
もともとかっこいいので、今更劇的な変化は無いですのでそれなりにやってみます。 サイドバーのNEW
-
めんどくさいとか考えるな!子テーマは作れ!
子テーマの衝撃 いろんなWordPressカスタムのページを見ていると、テーマファイルを直接編集す
-
STINGER3の小ネタカスタマイズをいくつか
簡単にできるものを一気にやってしまいます。 TOPページの記事一覧の区切りに点線を入れる &nb
-
STINGER3で見出しのカスタマイズ
Androidアプリのためのブログ製作だったわけですが、STINGERをいじる事が楽しくて全くアプリ
-
Stinger3にGoogle AdSenseを追加してみる
最初に断っておきますが、他のページに良くあるようなGoogle AdSenseを貼り付ける場所のカス
サイドバー
- PREV
- Google Playの検索順位を上げるには
- NEXT
- STINGER3で見出しのカスタマイズ