投稿ブロック＜コード＞にシンタックスハイライト：＜code＞

投稿ブロック＜コード＞にシンタックスハイライト：＜code＞

いくつか記述を追加するだけでエディタみたいな表示に！
出来上がりはこんな感じ。

<aside class="widget_text widget">
  <div class="textwidget custom-html-widget">
    このサイトは自分用のメモというか、引き出しとして残せればいいなぁ、というのと、
    日々の感じたこと・良かったものなんかを書きとめておこうと思って作りました。
    <div class="text-area-gray fs-small">
	  マシン：iMac、MacBookPro<br>
	  アプリケーション：Adobe各種、ほか
    </div>
  </div>
</aside>
目次

footer.php：</body> の上

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
カスタマイズ例
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy"></script>

https://cdn.rawgit.com/google/code-prettify/master/styles/

js

//preタグにgoogle code prettify用class追加
$(function(){
    $('pre').addClass('prettyprint');
    $('pre').addClass('linenums');
});

参考サイト

https://www.webdesignleaves.com/pr/plugins/google_code_prettify.html

サイト内にファイルを置く方法

構成や構造によってはこっちの方が良い場合もありそうなのでメモ！

https://jmblog.github.io/color-themes-for-google-code-prettify

prev 1 2