ScrapRun
コードブロック記法に書いたものをPreviewする汎用UserScript
https://github.com/takker99/ScrapRun
/takker/ScrapRun
少し前にScrapboxのMermaid記法previewが導入されたが、あれを他の記法もサポートするよう拡張したものと捉えていい
動作例
TikZ, SVG, GLSL, PlantUML
https://gyazo.com/ea18169ee7493b2f2886f3178d6053f8
https://gyazo.com/64ff48f5c85f737963013d08cf3e1896
https://gyazo.com/f3cfdb5aa4e4ddf2d7f1a9b933c35eb8
https://gyazo.com/464f96d9b30f97fdf6e10380fbecd210
https://img.shields.io/github/v/release/takker99/ScrapRun?display_name=tag&sort=semver#.svg
使い方
very easy ver.
ここをクリックして生成されたコードを自分のページのscript.jsに貼り付けてください
TikZも使いたい人ver.
1. ここをクリックして生成されたコードを、適当なページの適当なコードブロックに複数回に分けて貼り付けてください
コピペ一回では貼りきれないコードサイズなので、複数回に分けてください
面倒な場合は、とりあえずhttps://scrapbox.io/api/code/takker-dist/scrapbox-tikz/mod.js を使ってもいいです
以降、/project/workerのmod.jsに貼り付けたとします
2. 以下のURLの"https://scrapbox.io/api/code/takker-dist/scrapbox-tikz/mod.js"を"https://scrapbox.io/api/code/project/worker/mod.js"に書き換えてアクセスしてください
$ https://scrapbox-bundler.vercel.app/?url=https://scrapbox.io/api/code/villagepump/ScrapRun/with-tikz.ts&define=WORKER_URL:"https://scrapbox.io/api/code/takker-dist/scrapbox-tikz/mod.js"&define=ASSETS_URL:"https://scrapbox.io/files/65b701e5197ff10023e9b9ae"&bundle&minify&run&reload
3. 生成されたコードを自分のページのscript.jsに貼り付けてください
installation
⚠ScrapRunだけでは何も動きません
コードブロックの中身をどうpreviewするかは、各自で実装する必要がある
Userが自由にpreviewerを作れるよう設計しているため
すぐに使えるよう、TikZ, SVG, GLSL, PlantUMLのreference実装を同じrepoに用意してあります
TikZのpreviewer以外はいつものtakker.icon製UserScriptと要領は同じです
TikZのpreviewerはweb workerを使っているため、worker codeもbuildする必要があります
code:with-tikz.ts
import { setup, previewSVG, previewGLSL, previewPlantUML, previewTikZ } from "https://raw.githubusercontent.com/takker99/ScrapRun/0.3.1/mod.ts";
setup({ previewers: [
{ when: /(?:^|\.)svg$/, preview: previewSVG },
{ when: /(?:^|\.)glsl$/, preview: previewGLSL },
{ when: /(?:^|\.)(?:plantuml|puml|pu)$/, preview: previewPlantUML },
{ when: /(?:^|\.)tikz\(tex\)$/, preview: previewTikZ(WORKER_URL, ASSETS_URL) },
]});
previewers(型：Previewer[])に使いたいpreviewerの設定を書く
Previewerのwhenに指定した正規表現に一致するファイルネームのコードブロックに対して、previewを実行する
previewTikZにはworker codeのURLと、texのwasmやpackages,フォントデータを圧縮したzipファイルへのURLを渡す必要がある
Previewerの作成方法
previewの型定義は以下の通り
https://code2svg.vercel.app/svg/https://raw.githubusercontent.com/takker99/ScrapRun/0.3.1/preview.ts#.svg https://github.com/takker99/ScrapRun/blob/0.3.1/preview.ts
引数にコードブロックのfilenameと、更新前のコードブロック情報before、更新後のコードブロック情報afterが渡される
コードブロックを https://github.com/takker99/ScrapRun/blob/0.3.1/codeBlock.ts にあるcontent函数に通すと、同名のコードブロックの中身を全て連結した文字列を取得できる
Preview内で表示するDOMを組み立てたあと、renderにわたして描画する
cleanup函数を返却できる
reference実装の技術概要
SVG：Data URLにして<img>に表示しているだけ
PlantUML：PlantUML server用のURLを作って<img>に埋め込む
GLSL：GlslCanvasで描画
TikZ：Web WorkerでTikZJaxを動かして作ったSVGをData URLにして<img>で表示
画像を右クリックしてダウンロードできる
システムカラーを認識してlight theme/dark themeが勝手に変わるように作ってある
takker.icon
さすがにScrapboxのMermaid記法previewに比べるとUXが甘い部分があるものの、十分使えている
TikZのpreviewが死ぬほど便利
日本語圏で主流のLuaLaTeXはcompileが遅いので、TikZのrendering結果を確認するのにかなり時間がかかり、try and errorを素早く回せない
scrapbox-TikZjax(TIkZのpreviewerの名前)は複雑な3D plotを使わない限り一瞬でrenderingされるため、編集速度をと同じ速さでrendering結果を確認できる
code:very-easy.ts
import { setup, previewSVG, previewGLSL, previewPlantUML } from "https://raw.githubusercontent.com/takker99/ScrapRun/0.3.1/mod.ts";
setup({ previewers: [
{ when: /(?:^|\.)svg$/, preview: previewSVG },
{ when: /(?:^|\.)glsl$/, preview: previewGLSL },
{ when: /(?:^|\.)(?:plantuml|puml|pu)$/, preview: previewPlantUML },
]});