ソースコードを色分けする highlight.js

以前からネット上で非常に見やすいソースコードを見かけることがあり、私もいつか導入してみたいと思っていました。
調べてみると「highlight.js」とう JavaScript を使用すればできるようで、ネットを参考にしてやってみました。

まず、highlight.js のダウンロードサイトからダウンロードします。

ダウンロードされた ZIP ファイルの中で必要なものは、「highlight.pack.js」と「styles」フォルダだけです。 これらのファイルを適当な位置に配置して以下のようにリンクします。
「agate.css」はいろいろ試してみて、私が一番見やすいと思ったものです。

<head>
<link rel="stylesheet" href="./styles/agate.css">
<script src="./highlight.pack.js"></script>
</head>

そして、ハイライトするコードを以下のようにして作成します。

<pre><code>
<?php
require_once 'kiyopathoEXT.php';
if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
   if (move_uploaded_file($_FILES["upfile"]["tmp_name"], "xls/".$_FILES["upfile"]["name"])) {
      chmod("xls/" . $_FILES["upfile"]["name"], 0644);   
      insertData() ;      
</code></pre>

これだけではハイライトされないので、以下のコードを追加します。

<body>
<script>hljs.initHighlightingOnLoad() ;</script>
</body>

で、実際にハイライトしてみると、キレイで見やすいと思いますが padding が少し変です。さらに margin も調整する必要がありました。
そこで、「agate.css」を以下のように書き換えて調整し「myhightlight.css」という名前で登録してそれを読み込むようにしました。

.hljs {
  display: block;
  font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
  font-size: 15px;
  line-height: 180%;
  overflow-x: auto;
  margin: 20px 50px;
  padding: 0px 30px 30px 30px;
  background: #333;
  color: white;
}

最終的には以下のようになりました。


<?php
require_once 'kiyopathoEXT.php';
if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
   if (move_uploaded_file($_FILES["upfile"]["tmp_name"], "xls/".$_FILES["upfile"]["name"])) {
      chmod("xls/" . $_FILES["upfile"]["name"], 0644);   
      insertData() ;      

これは見やすくて便利ですね。どんどん使えそうです。

(2018年2月25日)