ウェブコーディング

WordPressでgoogle-code-prettifyの導入と最低限のCSS設定をする方法

google-code-prettifyとはウェブページ上のソースコードを自動的に色付けして、読み易く編集してくれるGoogleのシンタクスハイライト機能です。

導入した後は、<pre class=”prettyprint”></pre>でソースコードを挟むだけで、ハイライト機能が使えるようになります。

2015.10.02追記

現在、当ブログではシンタクスハイライトにgoogle-code-prettifyを利用しておりません。

現在はCrayon Syntax Highlighterを利用しておりますので、以下の例はCrayon Syntax Highlighterによるものに置き換わっております。

 

例えばこんな感じになります。

クラス設定をするだけなので、汎用性が高いので僕は気に入って使っています。

これをWordPressに導入するにはプラグインを使うのが一番簡単で、早いです。

プラグインも幾つかあるのですが、おすすめは「WP Code Prettify」です。

WP Code Prettifyの特徴

WordPressでは記事を書くときにビジュアルエディタを使っている方がほとんどかと思います。

通常はビジュアルエディタを使ってしまうと、HTML文字(<>など)がエスケープされてしまいます。

エスケープされるとソースコードが違った文字で置換されてしまうので、正しいソースコードを表示するには、文章をビジュアルエディタで作成した後に、テキストエディタをつかってソースコードを入力しなければいけません。

これではソースコードを入力する度に相当な手間がかかってしまいます。

WP Code Prettifyはこの手間を一気に省いてくれます。

ビジュアルエディタでエスケープされた文字もエスケープされる前のソースコードに置換してくれてから表示されるので、すべての作業をビジュアルエディタで行うことができます。

WP Code Prettify の導入

導入は通常のプラグインと同じように[プラグイン]→[新規追加]から「WP Code Prettify」を検索して、インストール→有効化で完了です。

WordPress管理画面の[設定]に[WP Code Prettify]が表示されていればOKです。

管理画面での設定

WP Code Prettify設定

WP Code Prettify設定

①はGoogle-code-prettifyを適応するJSファイルをheaderで読み込むか、footerで読み込むかの設定です。

通常のJSファイルと同様に「header」で問題ないでしょう。

②は常にGoogle-code-prettifyを適応するCSSを読み込むかの設定です。

速度を考えれば「NO」にしておいたほうが無難です。

③はGoogleが用意している基本配色を選択するプルダウンメニューです。

  • desert
  • doxy
  • prettify
  • sons-of-obsidian
  • sunburst

の5つの中から選べます。

基本の白基調のものは「prettify」ですが、それぞれフォントや基本色が違うので、いろいろ試してお好みのモノを選んでみてください。

④は表示のCSSをカスタマイズするときに、CSSを直接入力します。

行番号の表示や文字サイズ・行間の設定などを行ったりする場所です。

最低限のCSS設定

Google-Code-Prettifyの初期設定では、行番号が5行ごとにしか表示されなかったり、marginやpaddingが小さすぎて行番号が切れてしまったりするので、このあたりの設定をしなければいけません。

最低限のCSSをまず設定する場合は次のCSSをWP Code Prettifyの設定に入力して下さい。

ここまで実行してあれば後はお好みの設定をCSSに追加してく事になります。

このサイトのCSS設定

まだ未完成ですが、このサイトでは次のCSSを利用しています。

 

 

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. WordPress

    関連記事を表示するWordPressプラグイン「Yet Another Related Posts …

    WordPressの関連記事というと、タグやカテゴリーから関連性を決め…

  2. ウェブコーディング

    子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

    WordPressをカスタマイズするときに使うと便利なのが「子テーマ」…

  3. WordPress

    AdSenseのモバイル向けページ単位の広告をWordPressに設置する方法

    AdSenseにモバイル用のページ単位の広告という機能が追加されてしば…

  4. WordPress

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?

    もともとTCDテーマの購入は検討していたのですが、「CUBEY」「Bl…

  5. ウェブコーディング

    WordPressの記事内でPHPを実行した結果を表示する方法

    WordPressの記事内でPHPを実行できると、記事に表示できるコン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

スポンサードリンク

カテゴリー

  ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
WordPressテーマ「ANGEL(TCD047)」
  1. グラフィックデザイン

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  2. 素材

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  3. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  4. ブログ収益化

    脱初心者しませんか?Amazon・楽天のアフィリエイトを上手に活用するための予備…
  5. グラフィックデザイン

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
PAGE TOP