【JavaScript】Google Code Prettifyを動的に読み込む

2019年6月12日JavaScriptライブラリ,JavaScript

コード表示をシンタックスハイライトで色付けして見やすく表示するJavaScriptライブラリ「Google Code Prettify」

プログラムコードのの紹介などで良く使われますね

Google Code Prettifyを読み込む

Google Code Prettifyの実装に必要なファイルは2種類

CDNファイルがあるのでそちらを利用します

Prettify.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>

run_prettify.js

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Google Code Prettifyを実行する

通常、bodyの開始ダクで実行する事が可能です

<body onload="PR.prettyPrint()">

最初からHTMLに入っている部分はこれだけでOK

Google Code Prettifyを動的に実行する

ソースコードを編集できたり、jsで追記した部分やajaxで読み込んだ部分のコードはbodyタグで実行した後になるのでGoogle Code Prettifyが効きません

１、Google Code Prettifyを適用したいpreにclass名「prettyprint」を付与しておきます

２、JavaScriptで動的に実行する部分にprettyPrint()を記述します

prettyPrint();

run_prettify.jsだけでもGoogle Code Prettifyは機能するみたいだけど、JavaScriptでprettyPrint()を実行するにはprettify.jsが必要みたいです

Google Code Prettifyの動作サンプル

See the Pen JavaScript google code prettify by yochans (@yochans) on CodePen.

2019年6月12日JavaScriptライブラリ,JavaScript

Posted by Yousuke.U