給Obsidian Excalidraw增加代碼展示功能
目的
為了更好地展示代碼
有多種方式展示帶樣式的代碼,如下圖:插入圖片、將markdown作為iframe插入
但都不爽
其中圖片的缺點(diǎn):
放大模糊
尺寸大
加載慢
不能再后續(xù)編輯代碼
將markdown作為iframe插入的缺點(diǎn):
整個(gè)MD進(jìn)行渲染,非代碼部分影響效果
因此自定義iframe,從如vscode之類(lèi)復(fù)制的富文本直接可以粘貼到Excalidraw,可以一直放大不模糊,在比較小的容器里也能比較好地交互
效果
圖片放大模糊,后兩者是渲染HTML,不會(huì)存在這個(gè)問(wèn)題

在小容器中可以進(jìn)行交互以展示代碼

實(shí)現(xiàn)
將富文本轉(zhuǎn)為HTML插入iframe的div中,借用原本的縮放位移功能