GitLabでmermaidを使いたい。
PlantUMLが使える?なんで絵をWikiに入れたいだけなのにJava VMなんて重いものを動かさなきゃならないんだ。
ベースはpkgで入れたGitLab 9.2.10。(もちろんFreeBSDだよ!)
webpackもRuby on Railsも知らないので、とても適当。GitLabもコードをいじるのは初めてなので、割と適当。
https://github.com/2510/gitlabhq/commit/f42938716d74342a2077b2ff410d7b9d31358bce
pkgで入れたものに変更を適用するなら、変更したファイルを持ち込んであげて、yarn install --deployment
とrake gitlab:assets:compile
すればいい。
以下はあとで忘れないようにするためのメモ。
まずは準備。mermaidはyarn
で入れる。
# su - git $ cd /usr/local/www/gitlab $ yarn add mermaid --production
-
mermaidの定義を書く。banzaiってなんだよ、と思いながらいろいろ書く。
まずrougeのlexerを書かないと、```
に続けて書いた文字列(lang)が無視されてplaintextになって悲しい。(試行錯誤してたから違うかも?)
続いてfilterで普通のcode blockとして扱われないように避ける。
あとはfilterを使うようにpipelineの定義に足してやる。せっかく書いたclass指定がsanitizerに消されないように、sanitizerより後ろに置く。- lib/banzai/filter/mermaid_filter.rb
- lib/banzai/pipeline/gfm_pipeline.rb
- lib/banzai/pipeline/markup_pipeline.rb
- lib/rouge/lexers/mermaid.rb
-
mermaid.jsを読ませる。本体とCSS。
CSSはnode_modules以下にいるcssを無理やりimportする。行儀が悪いように見えるが、すでにGitLabが別のとこでやってるので、これを真似ちゃう。
Rails的にはRailsにnode_modules以下のassetsを認識させるという方法があるようだが、設定したら不思議なエラーを吐いたのでやめた。- app/assets/
- app/assets/stylesheets/framework.scss
- app/assets/stylesheets/framework/mermaid.scss
- wikiのプレビューで使えるようにする。
- app/assets/javascripts/main.js
- app/assets/javascripts/preview_markdown.js
assetsを再生成して、GitLabを再起動。
$ RAILS_ENV=production NODE_ENV=production bundle exec rake gitlab:assets:compile $ service gitlab restart
できあがり。