2019-12-08 / @syui

hugo

hugoのsyntax highlightを考えてみた

今まで放置してたhugoのsyntax-highlightを考えてみました。

ファイル名を表示し、プロンプト$をコピーしないように設定。

ファイル名はmarkdownのバッククオートで以下のようにすると使えるようにして

```sh:setup.sh
#!/bin/bash

あとコマンドプロンプトを示す$があると自動で<span class="prompt">$ </span>に置換。CSSでuser-select:noneを指定すると、コピー除外されます。styleを入れて強制しても良かったんですがそこはお好みで。

# https://github.com/syui/highlight-prompt.js
$ git clone https://git.syui.cf/syui/highlight-prompt.js
$ cd !$:t
$ cat highlight-prompt.js

function highlight_prompt() {
    var list = document.body.getElementsByClassName("language-sh hljs bash");
    if ( list.length >= 1 ) {
    	for(i=0; i <= list.length-1; i++){
    	    var nodes = list[i].innerHTML;
    	    if (nodes.match(/\$ /)){
    	        t = nodes.replace(/^\$ /mg,"<span class='prompt'>$ </span>");
    	        document.getElementsByClassName("language-sh hljs bash")[i].innerHTML = '';
    	        document.getElementsByClassName("language-sh hljs bash")[i].insertAdjacentHTML('afterbegin', t);		
    	    };
    	};
    };
}

CSSはこんな感じ。フォントとかも良さげにしました。

span.prompt {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
pre > code {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
}