Crayon Syntax Highlighterでソースコードを表示するとカッコいい

2014/12/19

前記事の「ブログの動画をスマホで見たら幅がでかすぎて困った話」でCSSの記述をしましたが、ワードプレスでソースコードの記述を記事上でエディタ風に表示しているサイトが多いので真似してみたいと思いました。

結果から言うと「Crayon Syntax Highlighter」というプラグインを使えば簡単でしたというお話。

わかりやすくて参考になったサイトはこちら↓

個人的にはプラグインを有効化すれば設定はほとんどデフォルトでOKですね。

唯一変更した項目はツールバーの表示で、前記事では表示しない設定にしました。デフォルトだとマウスオーバー時にツールバーが表示されます。

こんな感じ↓

header h1 {
	font-size: 12px;
	color: #666;
	font-weight: normal;
}

header h1 {

font-size: 12px;

color: #666;

font-weight: normal;

}

なんかちょっとウザかったので、ツールバーは表示しない設定にしました。

最も簡単な使い方としては、

ワードプレスにCrayon Syntax Highlighterをインストールするとテキストエディタに表示される「crayon」クリック。

「コード」の欄に表示したいコードを記入。

ツールバーを表示しないに設定。（個人的に好みなだけですので、真似しなくてOKです）

あとは右上の「挿入」をクリックすれば完了です。

細かい設定もできますし、見た目のことも考えればいろいろ弄ってみるのも面白そうですが、ここに時間かける必要性は感じないので個人的にはこれでOKです。

見てくれる人に伝わることが大事ですので、見やすければOKというスタンスです。めんどくさいというのもあるけどね。

: ワードプレスの記事をツイッターにランダム投稿したくてやったこと

ワードプレスの記事をツイッターに投稿すればちょっとアクセスが増えるんじゃね？なん …

: 記事投稿時のAll in One SEO Packの設定の方法

All in One SEO Packをインストールすると、投稿の編集画面に以下 …

: 初心者がAll in One SEO Packを使う時の設定はどうする？

ブログやサイト運営をやっていく中で、検索経由のアクセスアップを狙うならばSEOは …

: Crazy Lazyの使い方｜画像読み込み遅延プラグインは数あれど…

「画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます …

: All In One WP Security & Firewallでワードプレスのセキュリティ強化

このブログも立ち上げて数ヶ月が経過、まだ記事数も少ないですがポツポツとコメントが …

: All in one SEO packでXMLサイトマップを作成したときに出た警告

このサイトにAll in one SEO packでXMLサイトマップを作成した …

: YouTube埋め込み動画が重いのでYoutube SpeedLoadというプラグインを使ってみる

ワードプレスを使用している別ブログで、YouTube動画を埋め込んだまとめ記事を …

: All in One SEO PackのXML Sitemap設定

Googleウェブマスターツールにサイトを登録したら、サイトマップを送信します。 …