アプリケーション開発ポータルサイト
ServerNote.NET
Amazon.co.jpでPC関連商品タイムセール開催中!
カテゴリー【JavaScriptGit/GitHubGoogle
ブログに貼り付けたソースコードをハイライトする【Google Code Prettify編】
POSTED BY
2023-05-03

highlight.js編はこちら

当サイトは結局今回のGoogle Code Prettifyに落ち着きました。行番号がスムーズに表示でき、設置も楽でしたので。

1、CDN Hosted(ローカルに持たないで公式から直接ロードする)場合

HTMLgooglecodeprettify_hosted.htmlGitHub Source
<html lang="ja">
<head>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian&lang=css&lang=sql"></script>

<style type="text/css">
.prettyprint ol.linenums > li {
  list-style-type: decimal;
}

pre {
  padding: 5px 5px 5px 0px;
}
</style>

<title>ソースコードハイライトサンプル</title>
</head>

<body>
<pre class="prettyprint linenums lang-cpp">
#include &lt;stdio.h&gt;
#include &lt;stdlib.h&gt;
#include &lt;string.h&gt;

int main(void) {

  unsigned char buf[8192];
  int len;

  fprintf(stdout, &quot;---BEGIN DATA CONTENTS---\n&quot;);

  while (1) {
    len = fread(buf, 1, sizeof(buf), stdin);
    if (len &lt;= 0) {
      break;
    }
    fwrite(buf, len, 1, stdout);
  }

  fprintf(stdout, &quot;---END DATA CONTENTS---\n&quot;);

  return 0;
}
</pre>
</body>
</html>

出力結果はこちら(別ウインドウ)

・skin=sons-of-obsidianのところを、好みの見栄えのスタイルを選んで変更する。スタイルのデモは以下にある。

https://raw.githack.com/google/code-prettify/master/styles/index.html

選んだスタイルのファイル名は、

https://github.com/googlearchive/code-prettify/tree/master/styles

にあるので、差し替えればOK。

・デフォルトでサポートされていない言語は別途jsをロードする必要がある。上記例ではlang=css&lang=sqlをロードしている。どの言語だと別途jsが必要かは、

https://github.com/googlearchive/code-prettify/tree/master/src

にあり、ここにjsがある=別途指定が必要、ということになる。

・pre classにprettyprintを指定すれば、装飾が発動する。linenumsを指定すると行番号を表示する。

lang-で指定するターゲット言語の識別子は、

https://github.com/googlearchive/code-prettify#for-which-languages-does-it-work

を参照する。

行番号を表示する場合、スタイルシートで

.prettyprint ol.linenums > li {
  list-style-type: decimal;
}

とすれば、1行ごとに番号が振られる。(指定しないと5行ごと。)

・preタグのスタイルオーバーロードは好みで。上記例ではpaddingを指定している。

・highlight.jsと異なりpreタグは改行してコードを貼ってOK。

2、ファイル一式をローカルにダウンロードして使う場合

https://github.com/google/code-prettify/raw/master/distrib/prettify-small.zip

をダウンロード、解凍し、google-code-prettifyディレクトリをhtdocsに設置する。

CDNのように1行オールインワンではないので、以下のようにテーマcss、必要言語のjsを記述する。
加えて、JavaScriptで初期化関数を書く必要がある。

<link rel="stylesheet" href="./google-code-prettify/skins/sons-of-obsidian.css">
<script src="./google-code-prettify/prettify.js"></script> 
<script src="./google-code-prettify/lang-css.js"></script>
<script src="./google-code-prettify/lang-sql.js"></script>
<script>
  window.addEventListener("load", function() {
    PR.prettyPrint();
  });
</script>

トータルでは以下のようになる。出力結果は1、と全く同じ機能である。

HTMLgooglecodeprettify_local.htmlGitHub Source
<html lang="ja">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="./google-code-prettify/skins/sons-of-obsidian.css">
<script src="./google-code-prettify/prettify.js"></script> 
<script src="./google-code-prettify/lang-css.js"></script>
<script src="./google-code-prettify/lang-sql.js"></script>
<script>
  window.addEventListener("load", function() {
    PR.prettyPrint();
  });
</script>

<style type="text/css">
.prettyprint ol.linenums > li {
  list-style-type: decimal;
}

pre {
  padding: 5px 5px 5px 0px;
}
</style>

<title>ソースコードハイライトサンプル</title>
</head>

<body>
<pre class="prettyprint linenums lang-cpp">
#include &lt;stdio.h&gt;
#include &lt;stdlib.h&gt;
#include &lt;string.h&gt;

int main(void) {

  unsigned char buf[8192];
  int len;

  fprintf(stdout, &quot;---BEGIN DATA CONTENTS---\n&quot;);

  while (1) {
    len = fread(buf, 1, sizeof(buf), stdin);
    if (len &lt;= 0) {
      break;
    }
    fwrite(buf, len, 1, stdout);
  }

  fprintf(stdout, &quot;---END DATA CONTENTS---\n&quot;);

  return 0;
}
</pre>
</body>
</html>

※本記事は当サイト管理人の個人的な備忘録です。本記事の参照又は付随ソースコード利用後にいかなる損害が発生しても当サイト及び管理人は一切責任を負いません。
※本記事内容の無断転載を禁じます。
【WEBMASTER/管理人】
自営業プログラマーです。お仕事ください!
ご連絡は以下アドレスまでお願いします★

☆ServerNote.NETショッピング↓
ShoppingNote / Amazon.co.jp
☆お仲間ブログ↓
一人社長の不動産業務日誌
【キーワード検索】