[VSCode] Markdown Preview Enhanced で HTML 出力する際にサイドバーの目次を入れる

ずっとやり方が分からなかったのですが、英語版のマニュアルにやり方が書いてありました。 サイドバーのTOCを生成するには、VSCode の Markdown Preview Enhanced の設定でスクリプトの実行を有効にする必要があります。 - https://shd101wyy.github.io/markdown-preview-enhanced/#/html?id=configuration 尚、上記の情報は現時点の日本語版のマニュアルには書いてありませんでした。 - https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/html?id=%e8%a8%ad%e5%ae%9a ## 環境 - VSCode 1.80.1 - Markdown Preview Enhanced v0.6.8 ## スクリプトの実行を有効にする 拡張機能の設定で `enableScriptExecution` で検索すると設定項目が表示されるのでチェックを入れます。 <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieov2d_CLeXb8qNe-S4wkoGWn3qck2FlqxSXQ7Of8YJ6VkkZLosLyjE0jfC3rliZMX1FIyro0jbNATyGz1zkkFJpWgF3C-cXvhIxOiwRUjO6LTfhaQAbCwTkMHfDR-5LLNTviBXH5Elia52k9ohFB9LsuIU83Nh1_ZfOCik4__WRLzp0rV3CvnLfLt2XA/s696/01.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="245" data-original-width="696" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieov2d_CLeXb8qNe-S4wkoGWn3qck2FlqxSXQ7Of8YJ6VkkZLosLyjE0jfC3rliZMX1FIyro0jbNATyGz1zkkFJpWgF3C-cXvhIxOiwRUjO6LTfhaQAbCwTkMHfDR-5LLNTviBXH5Elia52k9ohFB9LsuIU83Nh1_ZfOCik4__WRLzp0rV3CvnLfLt2XA/s320/01.png"/></a></div> 尚、有効にするとセキュリティリスクがありますので、その点ご注意ください。 ## html の出力 あとはマークダウンのプレビュー画面で右クリックし、HTML に出力するだけでサイドバーに目次が出力されます。 尚、デフォルトではサイドバーは閉じた状態となっていました。 マークダウン内に `toc: true` を記述すると、サイドバーが開いた状態となりました。 以下サンプルです。 ``` --- html: toc: true --- # 見出し1 ## 見出し2 ### 見出し3 ### 見出し3 # 見出し1 ## 見出し2 ``` <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqYljv8t0Ron3HSJXOPGwgswG_7cB9c_WvmM5scr5UeN7fmlyw-2y-VuX5TJvp7Ckhuh0NEKKNIYzCxOb2xCuPI_fvChFMlYjYYaWqDUn6tLpdXD5tp127_lxVcZ89_2iPT1xx9pmW0wDpteB8rlNT3Z4p57cyc5vRoJl6Xrb_TZY-oN4dlEuU4j5990/s707/02.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="552" data-original-width="707" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqYljv8t0Ron3HSJXOPGwgswG_7cB9c_WvmM5scr5UeN7fmlyw-2y-VuX5TJvp7Ckhuh0NEKKNIYzCxOb2xCuPI_fvChFMlYjYYaWqDUn6tLpdXD5tp127_lxVcZ89_2iPT1xx9pmW0wDpteB8rlNT3Z4p57cyc5vRoJl6Xrb_TZY-oN4dlEuU4j5990/s320/02.png"/></a></div> ## 参考 URL - https://shd101wyy.github.io/markdown-preview-enhanced/#/html?id=configuration - https://qiita.com/kumapo0313/items/a59df3d74a7eaaaf3137