HTML にコードを書くときのシンタックスハイライト、 highlight.js *1 みたいなのを使ったり、 Vim から HTML にしたり*2、色々やりようがあるけど、 TypeScript (特に TypeScript React) のシンタックスハイライトでめっちゃいい感じみたいなものがあんまりなさそうな気がする？
TypeScript で賢いシンタックスハイライトといえば VSCode なので、 VSCode からうまいこと色付き HTML を出力したい。一応、 Mac でそのままコピペすると色付き HTML になるので、毎回手でうまくコピペするとそれなりにうまくいく(今回はクリップボード API を使ってみた)。ただ、背景色がついてたり、 class 名じゃなくて直に style が当たってたり (Vim でやると class 名に statement とか出てくれる？) 色変えたりしたいときは扱いづらい気がする。あと、自動でやりたいので Headless VSCode みたいなのがあると便利そう (HTML として出力してくれる API は必要そう)。
// VSCode でコピーした後、これをブラウザの開発者ツールに入れて、即座に document にフォーカスを当てると、 // 2秒後にクリップボード API 使って良いか聞かれるので、許可すると開発者ツールに色付き HTML がべろっと出る setTimeout(() => navigator.clipboard.read().then(res => res[0].getType('text/html').then(b => b.text()).then(te => console.log(te))), 2000)
interface User {
id: number
firstName: string
lastName: string
role: string
}
function updateUser(id: number, update: Partial<User>) {
const user = getUser(id)
const newUser = { ...user, ...update }
saveUser(id, newUser)
}
ここまで書いて思ったけど、 Monaco Editor *3 にコードを入れて表示する、ということをやると、その場で編集もできて便利かもしれない？ しかし Monaco Editor を頑張って script タグで出そうと思うとかなり難しそうだった。 glitch.me で作って iframe で出すとかはできるけどあまりに面倒なので、なんとかうまく使えたい気がする。あと Monaco Editor が画面に登場するまで時間がかかる (glitch.me だから？)。
