ブログやサイトの作り方

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

スポンサードリンク

スポンサードリンク

関連記事

  1. ブログやサイトの作り方

    WordPressで全文検索・置換をする「Search Regex」プラグインの使い方

    テキストエディタ(メモ帳)やオフィスソフト(Word)では、検索した文…

  2. ブログやサイトの作り方

    WordPressのバックアップを手動で確実に行う方法

    ある日突然WordPressのデータが消えてなくなったらと思うとぞっと…

  3. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」

    ブログをはじめるとき、どのサーバーを契約するかとういのは悩みど…

  4. ブログやサイトの作り方

    無料から収益化?有名ドコロの無料サーバーをピックアップ

    前回は、無料のブログサービスで使い勝手のいいものを2つ紹介しました。…

コメント

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

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

CAPTCHA


スポンサードリンク

カテゴリー

ピックアップ記事

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

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

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
  3. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  4. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
  5. ブログやサイトの作り方

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