ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

やりたいこと・脳内整理:Visual Studio Codeの拡張機能として、Markdownからbootstrapを使ったレスポンシブHTMLを生成させる機能を作りたい

いつもFF14というゲームの話を書いているブログですが、今回はきっかけがFF14の話であり、話の内容自体はプログラミングの話です。

きっかけ

現在、FF14を主にしたサイトを作成している

サイトはこちらです。
www.gelehrte.com
こちらのサイトを見ていただくとわかるのですが、レスポンシブ対応されていないのがわかります。それもそもはず、VSCodeMarkdown PDFという環境で、PDFの代わりにHTMLを吐き出しているからです。
そのHTMLをそのまま公開しているため、スマホで見るには辛い環境になっています。

Markdown PDF で生成されるHTMLがレスポンシブ対応されていない

上記で書いたとおりですが、レスポンシブ対応されていないのが問題です。もちろんMarkdownからどうレスポンシブ対応させたHTMLを生成させるかという問題はありますし、どうきれいなサイトを作るかは好みによるかと思いますが、ある程度のことはできるかと思います。

なぜMarkdown

簡単に言うと、HTMLを素のコードを書くのが辛いからです。少なくとも可読性の高い・拡張性の高いHTMLファイルをMarkdownから吐き出すことができれば問題ないと思います。

拡張機能は自作できるのか?

こちらのサイトを参考にできそう

zenn.dev

こちらのサイトが参考になりそうです。いくつかの拡張機能開発に関するブログ記事のリンクも張ってあるので、それらを参考に開発環境を整えたい・作成してみたいなと思います。

Markdownのどこまでをサポートするか

Qiitaのサポートしている範囲内を参考に

あくまでも目的はMarkdownでHTMLを簡単に吐き出したいだけなので、全てのMarkdown記法をサポートする気はありません。 もしかすると、Qiitaでの記法を全てはサポートしないかもしれません。

方針

bootstrapを利用したレスポンシブHTMLを作る

位置からcss jsを書くのはつらすぎるし、可読性も落ちるので、bootstrapを利用したいと思います。

bootstrapのバージョンは?

ある程度固定させます。もしかすると、拡張機能にbootstrapを含めておくかもしれません。一応、執筆時最新版の bootstrap v5.0を利用したいと思います。

bootstrapのバージョンが上がったものを使えるようにはできるようにする?

設定で

  • CDMでbootstrapのリンクを貼れるようにする
  • 自前のbootstrapへのリンクを貼れるようにする

などができるようにはしたいと思います。

拡張機能の公開はするのか

未定です。そもそもVSCode拡張機能を作ったことのないので、手探りになると思います。何かしら今後ご報告できれば良いなと思います。

拡張機能の名前は?

Markdown to HTML with bootstrap」とかにしようかなと思います。仮名ですが。

終わりに

思いつきで書き始めた備忘録的記事でした。次回があるかはわかりませんが、せめて VSCode拡張機能を作り始めた記事ぐらいは書ければいいなと思います。


広告