ScrapRun
コードブロック記法に書いたものをPreviewする汎用UserScript
少し前にScrapboxのMermaid記法previewが導入されたが、あれを他の記法もサポートするよう拡張したものと捉えていい
動作例
使い方
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&reload3. 生成されたコードを自分のページの
script.js に貼り付けてくださいinstallation
⚠ScrapRunだけでは何も動きません
コードブロックの中身をどうpreviewするかは、各自で実装する必要がある
Userが自由にpreviewerを作れるよう設計しているため
TikZのpreviewer以外はいつもの
製UserScriptと要領は同じです
TikZのpreviewerはweb workerを使っているため、worker codeもbuildする必要があります
with-tikz.tsimport { 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 の型定義は以下の通り
引数にコードブロックの
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が勝手に変わるように作ってある
さすがにScrapboxのMermaid記法previewに比べるとUXが甘い部分があるものの、十分使えている
TikZのpreviewが死ぬほど便利
日本語圏で主流のLuaLaTeXはcompileが遅いので、TikZのrendering結果を確認するのにかなり時間がかかり、try and errorを素早く回せない
scrapbox-TikZjax(TIkZのpreviewerの名前)は複雑な3D plotを使わない限り一瞬でrenderingされるため、編集速度をと同じ速さでrendering結果を確認できる
very-easy.tsimport { 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 },
]});