その他

GitLabでmermaidを使う

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
  1. 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
  2. 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
  3. 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

できあがり。