VSCodeでMarkdown_Preview_Enhancedを使用する時の設定等
たくさんの方の記事を参考に自分で設定しているのをメモとして。
日本語の公式
https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/
フロントマスターでの設定
マークダウンの始めの所で設定するのをフロントマスターというよう。
- 上書き保存でhtml出力される
- toc目次の設定をする
---
export_on_save:
html: true
toc:
depth_from: 1
depth_to: 6
ordered: true
---
スタイルシートの設定
スタイルファイルを読み込むように本文へ追加
@import "./.vscode/style.less"
見出しの連番とか見た目を設定している
/* 見出しを自動採番する */
body {
counter-reset: chapter;
}
h1 {
counter-reset: sub-chapter;
}
h2 {
counter-reset: section;
}
h3{
counter-reset: sub-section;
}
h4{
counter-reset: sub-sub-section;
}
h5{
counter-reset: sub-sub-sub-section;
}
/* h1:before {
counter-increment: chapter;
content: counter(chapter) ". ";
} */
h2:before {
counter-increment: sub-chapter;
content: counter(sub-chapter) ". ";
}
h3:before{
counter-increment: section;
content: counter(sub-chapter) "-" counter(section) ". ";
}
h4:before{
counter-increment: sub-section;
content: counter(sub-chapter) "-" counter(section) "-" counter(sub-section) ". ";
}
h5:before{
counter-increment: sub-sub-section;
content: counter(sub-chapter) "-" counter(section) "-" counter(sub-section) "-" counter(sub-sub-section) ". ";
}
h6:before{
counter-increment: sub-sub-sub-section;
content: counter(sub-chapter) "-" counter(section) "-" counter(sub-section) "-" counter(sub-sub-section) "-" counter(sub-sub-sub-section) ". ";
}
* {
font-family: "Meiryo UI";
margin:0;
padding:0;
}
h1 {
position: relative; padding: 0.5em; background: #7db4e6; font-weight: bolder;
}
h2 {
position: relative; padding: 0.5em;
// background: #7db4e6;
border-bottom: 8px solid #7db4e6;
}
h3, h4, h5, h6 {
position: relative;
border-bottom: 5px solid #7db4e6;
}
.backcolor{
background-color: #FFCC99;
}
スクリプトの設定
スクリプトファイルを読み込むように本文へ追加
@import "./.vscode/script.js"
htmlを開いた時に、TOC目次を開いた状態にしたいので追加している
window.onload = onLoad;
function onLoad() {
document.body.setAttribute('html-show-sidebar-toc', true)
}