VSCodeでMarkdownをアレンジしてみる
はじめに
- Web系エンジニアとしては、Markdownを使ってドキュメントを書く場面というのは頻繁にあることと思います。
- 世の中の色々なサービス（Github のようなリポジトリ系サービス, CMS, チケット管理システム…etc） でも Markdown に対応しており、テキストベースでちょこっと書くだけで、良い感じに整形されたドキュメントとして表示できるのはありがたい限りです。
- このブログも、実は Markdown で書いていたりします。
- Markdownを書く際は VSCode を使用していますが、使っている際に得た Markdown アレンジ方法を紹介したいと思います。
VSCode の Markdown プレビュー を使う
開発にもドキュメント記述にも VSCode を使用しています。
特にドキュメント記述については、小さいミーティングなどでちょこっと発表しなければならない場面…で重宝しています。
具体的には プレビュー機能（Ctrl + Shift + V を押す） で整形された Markdown を画面に写したりして発表しております。
例えば以下の左部のような Markdown は デフォルトでは右部のように表示されます
デフォルトのプレビュー機能は発表でﾁｮｯﾄ見づらい…
確かに右の通り整形されているので、ドキュメントとしては、キレイにまとまっていますが（内容はサンプルなので適当ですが）、画面に写して使う分には少し見づらく感じます。
なんとかして見やすい形に整形できないでしょうか。
解決方法
結論としては Markdown から スタイルシート を参照 させることで解決できました。
- Markdown 先頭に 以下のような CSSファイルへの参照を追加
<link rel="stylesheet" href="style.css" /> style.cssを同階層に保管して、スタイルを書く
例として、以下のようなCSSファイルを同ディレクトリに置いてみます。
* {
font-size: xx-large;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 900;
border-bottom: 1px solid #fff;
}
先程の Markdown を見てみると、以下の画像のようになります。
フォントサイズが大きくなり、少しは画面に写したときに見やすくなったのではないでしょうか。
ちょっとした手間で自由にアレンジできますので、ここから後はもう、アイデアのままスタイルを弄り、Markdown にアレンジを加えてみましょう。
応用
JavaScript
勘の良い方はもうお察しかと思いますが、以下のようにMarkdown に記述すると、 JavaScript も読み込めてしまいます。
<script src="./main.js"></script>
ただし、初回表示時には、以下のようなボタン(?) が表示され、直ちにJavaScriptが読み込まれることはありません。
このボタンをクリックし、以下の設定から「無効にする」（＝JavaScript 実行制限をしない）などを選ぶ必要があります。
※ 自身で書いたスクリプトであれば問題ないですが、外部から入手したものについては自己責任で取り扱いましょう！
これで JavaScript も読み込めるようになりました・・・が、当然、このプレビュー機能では使用可能な機能は制限されているため、その中でやりくりする必要があります。
例： ローカルストレージなどの記録系I/F が使えない（＝データの永続化はできない）など
幸いにしてDOMの操作はできますので、そこをちまちまいじるスクリプトを書けば、スタイルシートとのあわせ技で、色々なことができるようになります。
応用例：スライド
一例としては PowerPoint のようなスライド表示・・・のようなものも、実現できたりします。
実際に以前作ったものをプレビューで表示してみます。
これは単なる CSS だけですが JavaScript も組み合わせれば、クリック時に次のスライドへ…などといった処理も可能です。
他にも、Markdownベースの記述で、Webサイトのモックを作れるようにしたり、リスト記法で組織図…のようなものを作ったり… など色々考えられそうです！
まとめ
- VSCode の Markdown プレビュー機能を活用しましょう！
- アイデア次第では実務で使える便利なツールなども作れたりする…かも？！