2019年10月12日土曜日

prettify.jsとpreタグへの自動適用

<pre/>タグで囲んだところに自動で色付けを行う方法
 <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert' async/>
↑asyncを付けて遅延読み込み
 <script type='text/javascript'>
    $(document).ready(function(){ $('pre').addClass('prettyprint'); });
 </script>
↑preタグに'prettyprint'を設定
これで'prettyprint'が付いてから、run_prettify.jsが実行され色付けされる。

run_prettify.jsを使わない時は、prettify.js
その時は使用するskinのCSS指定と、prettyPrint()メソッドの呼び出しが必要

※追記:タイミングがずれるようなのでprettify.jsに変更
<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js'/>
<link rel="stylesheet" type="text/css"
 href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/skins/desert.css" />
<link rel="stylesheet" type="text/css"
 href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.css" />

<script type='text/javascript'>
    $(document).ready(function(){ $('pre').addClass('prettyprint'); prettyPrint() });
</script>

0 件のコメント:

コメントを投稿