code2svg
API設計
⬜ /
return swagger.json
未実装
https://code2svg.vercel.app/svg/:options?/:url
convert a source code got from url to a svg image
:url にdata urlを入れられたら面白いかも
options| name | posibble values | description |
| L(\d+)-(\d+) | N/A | render particular lines in the range |
| L(\d+) | N/A | render a particular line |
| light | github (default) | specify the light theme |
| dark | github-dark (default) | specify the dark theme |
| lang | (auto detect when not specified) | specify the language |
| nowrap | true or false (default) | whether wrap lines |
| width | number | the width of the image |
| height | number | the width of the image |
| blanks | number | 追加の空行 |
いずれ実装するもの
行番号
headerの付与
ファイル名やソースへのリンクを表示する
browser URLの自動変換？
github.comをraw.githubusercontent.comに自動変換するなど
変換を無効にするoption noconvert も実装する
HTMLファイルそのものを参照したい場合に必要
list languages available
application/json
list themes available
application/json
highlight.jsのテーマを全て使えるようにしておく
実装したいこと
対応する(dark|light) themeを自動で探して適用する
tsconst detectCorrespondingTheme = (theme: ThemeName): ThemeName => {
if (theme.includes("-light")) {
const dark = theme.replace("-light", "-dark");
if (isTheme(dark)) return dark;
const normal = theme.replace("-light", "");
if (isTheme(normal)) return normal;
}
if (theme.includes("-dark")) {
const light = theme.replace("-dark", "-light");
if (isTheme(light)) return light;
const normal = theme.replace("-dark", "");
if (isTheme(normal)) return normal;
}
return theme;
};
const [light, dark] = lightTheme && !darkTheme
? [lightTheme, detectCorrespondingTheme(lightTheme)]
: !lightTheme && darkTheme
? [detectCorrespondingTheme(darkTheme), lightTheme]
: lightTheme && darkTheme
? [lightTheme, darkTheme]
: ["github", "github-dark"];
特にheaderと行番号は作りたい
行番号があると、範囲調節がしやすい
バグ
⬜theme CSSをescapeする
CSSのコメントでhtmlタグっぽいものを使うとsvgがエラーを出す
panda-syntax-light で発生
全部hastで作って toHtml をかければ解決するかな？
作り直してpushしたらなおった
全角文字の判定をする処理を入れて、全角文字を2文字と数えてれば直るだろう
井戸端が初出
2023-02-25
18:01:28 おんなじ名前のプログラムがすでにあった！？
Javaで書かれている
2023-02-18
19:00:55 production deployed
完成！
18:57:53 ciを設定した
18:49:14 vercel側のチェック終了
18:45:51 なぜかvercelだと /svg/https://~ が /svg/https:/~ にredirectされてしまう
routingで https?:/? にも対応できるようにした
glob patternにまだ対応していないようだったので、必要なファイルだけcheckするようにした
型定義の調整に手こずった
17:52:52 width と height を実装した
17:39:46 だいたい実装できた
まだ実装していないもの
✅ nowrap
画像の大きさは外部から指定できた方がいい
15:26:39 repoを掘って動作確認中
実装