2018年8月16日

RedmineにPrism.jsを組み込んで、シンタックスハイライトを拡張する

前置き

2019年6月1日追記:
Redmine 4.0でPowershellを含めた100を超える言語に対応したので、あえてPrismを組み込む必要はなくなりました。公式対応はありがたいですね。
https://www.redmine.org/projects/redmine/wiki/RedmineCodeHighlightingLanguages

※以下の元記事も、行の強調などを採用してみたい方のために残しておきます。

Windows屋なのでPowershellをよく書くのだけれども、RedmineにはPowershellのハイライト機能がないのである。<PRE></PRE>だと見目麗しくない。
苦々しく思っていたところ、先日の記事でPrism.jsのハイライト手法がRedmineと同じだったので、「これ、いれるんじゃない?」と思いついて試してみたら本当にできてしまったというだけの話です。


ということで、邪道ではありますが、ありものを組み合わせてそれっぽく使ってしまおうというのが今回のお題です。
なお、実用範囲とは思っていますが、若干いけてない部分もあるので、それも併せてお知らせします。

設定

以下の流れです。
  1. prism.js、prism.cssを公式サイトからダウンロードする
  2. redmineのpublicディレクトリ(Apache公開ディレクトリ)にファイルを配置する
  3. 以下のファイルにリンクを付与する。
    /var/lib/redmine/app/views/layouts/base.html.erb
1は公式サイトからダウンロードしてください。
なお、成功パターンのパラメーターでのリンクも張り付けておきます。(いつまでちゃんと動くかわかりませんが)
うまくハイライトされないという場合には、成功パターンのリンクからそのままダウンロードして試してください。
うまくいったらパラメーターを変えて、自分向けにアレンジしてください。

2はprism.jsとprism.cssをscpで転送後、以下のコマンドで公開ディレクトリーに配置するイメージです。
mkdir /var/lib/redmine/public/prism
cp ./prism.* /var/lib/redmine/public/prism/

chown -R apache:apache /var/lib/redmine/public/prism
ls -la /var/lib/redmine/public/prism/

# ファイル公開チェック
curl http://localhost/redmine/prism/prism.css
curl http://localhost/redmine/prism/prism.js
※構築はほぼ以下のブログにある通りなので、/var/lib/redmine へ導入している想定の手順です。環境に応じて適宜読み替えて実施ください。
http://blog.redmine.jp/articles/3_1/installation_centos/
※MariaDB(MySQL)が好きなので、あえてVer.3.1版の記事を拾ってます。

3はRedmineが出力するHTMLのテンプレートを直接編集する作業です。
※以下は趣味で設定変更前後の差分を取ってますが、やってることはbase.html.erbをviで編集してhttpdを再起動しているだけなので惑わさらないようにしてください。
# ○変数設定
BKDIR=~/bkconfig/; [ ! -e $BKDIR ] && mkdir -p $BKDIR
TARGETFILE=/var/lib/redmine/app/views/layouts/base.html.erb

# ○事前バックアップ
cat $TARGETFILE
echo $TARGETFILE | sed -e 's/\//_/g' | xargs -I{} cp -pi $TARGETFILE ${BKDIR}bk$(date +%Y%m%d){}
ls -la --time-style=long-iso $BKDIR
ls -la --time-style=long-iso $TARGETFILE

# ○編集
vi $TARGETFILE

# 以下の行を</head>の直前に追加
# --------------------------------------
<link href='/redmine/prism/prism.css' media='all' rel='stylesheet' type='text/css'/>
<script src='/redmine/prism/prism.js' type='text/javascript'></script>
# --------------------------------------

# ○事後確認
cat $TARGETFILE
echo $TARGETFILE | sed -e 's/\//_/g' | xargs -I{} diff $TARGETFILE ${BKDIR}bk$(date +%Y%m%d){}
ls -la --time-style=long-iso $TARGETFILE

# ○設定の反映
systemctl restart httpd

注意事項

CODEタグのあとは何も書かずに1行空けるのがRedmineのお作法ですが、Prism.jsだと1行空けずにCODEタグの後ろが書き始めとなります。
なので、既存の場所に適用すると1行空いてしまいます。行番号がないので些事かとは思いますが。
プラグインはRedmine組み込み側の何かしらとバッティングするらしく、行番号とかも動きません。
デフォルトのToolbar以外は外してしまうのがいいと思います。
時間があったら解析したいけど、それだったら、いっそ組み込み可能なテーマとか作ってしまったほうが建設的なのではという思いさえあります。まぁやらないだろうな。。。

ヘッダへの組み込みのファイル名は以下のページを参考にさせていただきました。面倒なんでRuby記法使わずに直接埋め込んでますけど。感謝。
http://www.lesstep.jp/step_on_board/redmine/785/

なお、prismのライセンスはMITとのことです。
https://github.com/PrismJS/prism/blob/master/LICENSE

0 件のコメント:

コメントを投稿

TIPS:VSCodeで日本語化がうまくいかないとき

前置き Visual Studio Codeで拡張機能「 Japanese Language Pack for Visual Studio Code 」を入れたら日本語になりますよね。 でも、「 Remote Development 」で色々な環境を日本語化してると、偶に...