コード表示を綺麗に:シンタックスハイライトしたい

  • 19
    Like
  • 0
    Comment
More than 1 year has passed since last update.

サイト制作時に使うモジュール集を作成するときに、
他の人がコードを見やすいようにしたい。

google-code-prettify 導入!

google-code-prettifyとは

  • コードを綺麗に表示
  • シンタックスハイライトをしてくれます。

autoloader(以下)を使い、CSSを読み込ませればすぐにできます。

<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

ただ、autoloaderだとカスタマイズが難しいようす。
(カスタマイズ無しでよいならばこちらの方が楽ですね)

ファイルをダウンロードして使います。

https://github.com/google/code-prettify

  • lang-css.js
  • prettify.css
  • prettify.js

を落としてきます。

ファイルを読みこませます

CSS

header内に読み込みます。

<head>
<link rel="stylesheet" href="../css/prettify.css" type="text/css">
</head>

JS

私はjsをbody閉じタグ前で読み込ませました。


<script src="../js/prettify.js"></script>
<script src="../js/lang-css.js"></script>
<!-- prettyPrint()関数を実行するため追加↓ -->
<script>prettyPrint();</script>
</body>

使用例

※.module_codeのdivは後から勝手に付けたので消してくださって問題ないです。

HTML

<div class="module_code">▼ HTML</div>
<pre class="prettyprint">
この中にコード
</pre>

こんな感じになります。(内容はh3のコード)

キャプチャ.PNG

カスタマイズ

以下に様々なスタイルのCSSがあります。
その中身をprettify.cssと入れ替えると、
スタイルが変わります。
https://github.com/google/code-prettify/tree/master/styles

スタイルの例は以下で紹介しています。
https://github.com/google/code-prettify/tree/master/styles

てへぺろ うっかり例

コードの表示が上手くできてないと思ったら、
(スタイルが適用されてしまっていたり。)
preタグ内の実体参照化を忘れていました。(先輩からご指摘。ありがとうございます!)

ちなみに以下でSublimeTextとEmmetをつかえば、
簡単に実体参照できました。

http://aicocco.com/post/102454640894/syntax-highlighte%E3%81%A8emmet%E3%81%A8

参考:

Google Code Prettify のかゆいとこをなんとかする jQuery プラグインを書いてみた
http://www.cyokodog.net/blog/jquery-ex-code-prettify/

[Ex Code Prettify] その場で編集/実行できるシンタックスハイライター jQuery プラグイン
http://www.cyokodog.net/blog/ex-code-prettify-doc/

google-code-prettify を使ってシンタックスハイライト
http://www.webdesignleaves.com/wp/htmlcss/1457/