📁

マークダウンを簡単に共有できるWebアプリを作った

2025/02/08に公開

概要

クエリパラメーターにマークダウンを入れて、そのままシェアできてプレビューもできるものを作ってみました。

できたものと特徴

MarkSnap

特徴

  • ドキュメントの内容はすべてクエリパラメーターに保持するため、サーバー側で何も保存しない仕組みです。(CDNキャッシュなどは発生するかもしれませんが)
  • プレビュー画面からシームレスに編集ができ、誰でも簡単にマークダウンを書いて共有できます。
    • 個人的に使いたかったのでMermaid記法にも対応しています。

動機

生成AIの流行もあり、マークダウン形式で何かを出力させたり、その結果を共有したいケースが増えていました。(生成AIサービス側の共有機能などもありますが)

Github Gistに上げるほどでもないものを共有したいけど、プレーンテキストで送るのもなーと思っていたので主に自分向けに作りました。

裏テーマ

Web Share APIと、lz-stringを使ってみたかったので作りました。
前者は最近うまく動かないという記事を読んだのですが、今回はURLだけをシェアしたいので問題なさそうです。
lz-stringに関しては、調べていくうちにWeb 標準のWeb Stream APIでできることがわかったので、記事を参考にこちらの実装にしました。

最後に

今回の記事をMarkSnapで書いたものが以下になります。

https://mark-snap.com/share/?c=eJx9VV1PG1cQffevsMRLeTB-71vUSlGkpopKq0pFfVjMCiz8pfUmiDzt3GscGxwZDA5QA45B2MYudtIEgT_AP2Z818sTf6Ga2bVNk7aSZa19586cOXPO7IzfrgqnCj4UbRR1lA2UOygvUFZQ9lEM6BuaKE_4ZxulhaKK8hOKgto4R5FDqKIFCMcILYQ7-ohrFDUUpwg1hLcUIPdR_olyF-U55xHekdji5xaKwvD2COGMgmHAefYRymgJn29mxj_OVPbCoT7KdtTdZ9_Cc81YnY9pid-_WTHNRPLbYDCqGauBZExLzIXi0Vmf76Gf-U2PxbhKB2WGkfRR3HBfDe6ljXBIYCh1G0UGIY_QQEjRFWLmGmUNoa2yf9mp0kM_S6hm_B6IgB9lFsUld1ehhDKD0FLpDdXqUEI4ROhQa_9L8nBwbOdgjKSMAohYcUWnchtlX8FnhNrwtohCDAfH6vKAWSKcw15xdJVi6mqUwRIP_cx33__IqM5QSm7hnIMvENqjw-5orzyu5U5hn6d5h1BCsYuQozb9_oAfYZdP2gs_ryf0-ZARTpj-FxFtfdmIv4wtTZlfW1ubM9cTepJDIlpseS5uLAcTEW09ODsu3ZrIw74oO_IWoY7QQ-ir7ZxdOyDeWmXnbGPSCNP7D_2M9nr3x6cMO8t99VG-pwDRQWiOruv3pTRCzhONBU7jAz0LMfpQUW8P_kvPdumGJg5VtfHRPsqONXfnwSAqlLU17HZHf6RoXLcDDi8TEFJumeVTe64bUS285NQP7E9FqiWEat-pwREPq8p3xjlJ22qraF-UfaO9sp3ZfvIMoWVfgVPJ8UwEik1SwVd41e2p6uc9ORATBfWmqzZLCEUaIMlnc-LL0dW2fXLElnU7Y2-Ruj9y2g5CTp3uI2QeAfT899DPTKB5WtxF0WEtttx840HygCeo3SZdGfmehs2Vl4v-p-GkSdTdbCIUWHo9FkWNr7mG8_bBl1BhhyKJin3PweSzNAnctTXU7skubGI3G7mqblvH472SmsxoeNNDaDpvGiqTVts7nLxJG8jD_Xj3OGd5qkMFT3y_6ov--RXN0P1PXjwj6VoQeR1ImkY4tsxLbPBoiX2pjH8poLJvHWuDvGUfWc5gByHN53m1xWN1OSGLpBDSTv1g2N2aGs7UQyuLkfjy3Kq2roVo3wXX9MVAkgAGtEQ4sBY3VjV26SyKgtO4ZGe_d-G440ELhr1NVTpBaP_y0w98uoOi8GiLT0ZAt1Qxf1_JMbAiqys9deqUCmjevzsdC77NHhx4O5AS5flaBaG5QIza9UO7-w6hxfSahq5FXX5r0_cE7DINORT5Ca1TJl7rsdjckv4qGFqJm0HNMMOhiJ4MTgAFXiUDoXg0YejJZDgeo391LTrrEWGByyzJLi8cS5JtqWCFNsx0IzW5o-n4_gZJHnRh

余談ですが、自分自身へのリンクを含んだ記事を書こうとすると、それによって自分自身のリンクが変わってしまうためできないというちょっとした欠点があります。自己言及のパラドックスのようで少し面白いですね。

Discussion