サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. 「google-c…
  • 最終更新日:
  • 投稿者: @signpostme

「google-code-prettify」を使って埋め込んだソースコードをかっこよく表示させる

先日公開した記事のソースコード埋め込みに使用した「google-code-prettify」のご紹介です。このライブラリはGoogle製で、使用すればシンタックスハイライトが適用されかっこ良くソースコードを見せることができます。

google-code-prettifyとは

Googleが提供しているシンタックスハイライターです。<pre>~</pre>内に記述されたソースコードをかっこ良くハイライトしてくれるライブラリです。Bootstrapのチュートリアルにも使われているので、身に覚えがある方も多いのではないでしょうか。

スクリーンショット 2013-08-20 16.57.07

 

設定方法

1. google-code-prettify をダウンロードしてきて解凍します。

 

本体ダウンロード

 

 

2. 解凍して出来た「google-code-prettify」フォルダを、使用するサーバーにアップロードします。

 

 

3. 以下のコードを<head></head>内に記述します。

 

<link rel="stylesheet" href="google-code-prettify/prettify.css"></link>
<script type="text/javascript" src="google-code-prettify/prettify.js"></script>

 

 

4. <body>タグを以下のように書き換えます。

 

<body onload="prettyPrint ()">

 
5. <pre></pre>にclass=”prettyprint linenums”を付け足します。

 

<pre class="prettyprint linenums">

 
6. 完成

 

<div class="class1">わっしょおおい</div>
<div class="class2">わっしょおおい</div>
<div class="class3">わっしょおおい</div>

 

 

 自分好みにカスタマイズ

<head>で読み込んだスタイルシートの中身を書き換えてあげれば見た目を変更することができます。

デフォルトだと周りを囲う線がちょっと濃いめなので、薄くしてあげるとかっこよくなると思います。

 

コードを多く掲載する技術ブログなんかはこのライブラリを使うと見栄えも良くなるしいいのではないでしょうか。

 

新着記事を見る

TOP