Visual Studio Code　Markdown専用の設定

# はじめに

これは自分がVisual Studio CodeをMarkdown専用に使用しているので
現在の設定をメモしておこうかなと

## 拡張機能

- **Japanese Language Pack for Visual Studio Cod**
    - Visual Studio Codeの日本語化
    - リンク先： [Japanese Language Pack for Visual Studio Cod](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

- **Markdown Preview Enhanced**
    - マークダウンのプレビューをする拡張機能 
    - リンク先：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

- **Markdown All in One**
    - Markdownに関すること全部盛り
    - リンク先：[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
- **markdownlint**
    - Markdownの構文とスタイルをチェック 
    - リンク先：[markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
- **Markdown Shortcuts**
    - ショートカット
    - リンク先：[Markdown Shortcuts](https://marketplace.visualstudio.com/items?itemName=mdickin.markdown-shortcuts)
- **Paste Image**
    - クリップボードとかからのイメージ画像に関する便利機能
    - リンク先：[Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)
- **Markdown Table**
    - テーブル作るときめちゃ楽
    - リンク先：[Markdown Table](https://marketplace.visualstudio.com/items?itemName=TakumiI.markdowntable)
- **Markdown Navigation**
    - マークダウンのナビゲーションを表示 
    - リンク先：[Markdown Navigation](https://marketplace.visualstudio.com/items?itemName=AlanWalk.markdown-navigation)
- **zenkaku**
    - 全角スペースがわかるように可視化 
    - リンク先：[zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)

- ~~**markdown-index**~~
    - ~~インデックス（目次）を作成してくれる~~
    - ~~リンク先：[markdown-index](https://marketplace.visualstudio.com/items?itemName=legendmohe.markdown-index)~~


## json設定
```jsonc:settings.json
{
    //---------------------------------
    //その他設定
    //---------------------------------
 //   "problems.autoReveal": false,           // レビューバーの自動表示
   "remote.autoForwardPorts": false,
    "files.insertFinalNewline": true,       // ファイルの末尾を改行で終わらせる
    "breadcrumbs.enabled": true,            // ファイルのパンくずリストを表示する

    "workbench.statusBar.visible": false,   //ワークベンチの下部ステータスバーの表示
   //ファイル関連付け設定
   "workbench.editorAssociations": {
		"*.md": "markdown-preview-enhanced"
	},
 
    //---------------------------------
    //meditor設定
    //---------------------------------
    "editor.insertSpaces": false,           //タブをスペースに変換
    "editor.minimap.enabled": false,        // ミニマップを非表示にする
    "editor.fontSize": 11,                  // フォントサイズを変更
    "editor.tabSize": 2,                    //タブ数
    "editor.cursorSmoothCaretAnimation": "off",     // カーソルの点滅を(アニメーション表示する:on)
    "editor.cursorStyle": "line-thin",              // カーソルの外観をブロックに変更:"block"
    "editor.bracketPairColorization.enabled": true, // 括弧の対応を色付ける
    "editor.accessibilitySupport": "on",            //スクリーンリーダ最適モード

    //---------------------------------
    //markdown-preview プラグイン設定
    //---------------------------------
    
    "markdown-preview-enhanced.previewTheme": "one-light.css",   //画面のスタイル "one-light.css"　　"github-light.css"
    "markdown-preview-enhanced.codeBlockTheme": "vs.css",       //ブロックコードのスタイル "vs.css" "coy.css"
    "markdown-preview-enhanced.previewMode": "Previews Only",  //プレビュー拡張設定[Multiple Previews][Previews Only][Single Preview]
    //[Previews Only]で開いて編集、が一番　
    //[Multiple Previews]：エディトモードも表示されるが、タブ移動できない　
    //[Multiple Previews]複数枚開けない

    "markdown-preview-enhanced.enableExtendedTableSyntax": true, //表の拡張機能
    "markdown.extension.toc.updateOnSave": true,    //目次の自動更新
    "markdown.extension.toc.orderedList": false,     //目次リスト作成
    "markdown.extension.toc.unorderedList.marker": "-", //目次のマーク設定
    "comment.markdown-preview":[
       "markdown.extension.toc.slugifyMode : vscode",  //目次ID生成方法リスト作成
   ],

    "markdownlint.config": {
        "MD025": false
    },
    
    //---------------------------------
    //mPaste Image 画像プラグイン設定
    //---------------------------------
    "pasteImage.path": "${currentFileDir}/images/${currentFileNameWithoutExt}", // 保存フォルダ
    "pasteImage.defaultName": "YMMDDHH_mmss.png", // 保存pngファイル名

    //---------------------------------------
    // Markdown デフォルトプレビューの設定。
    //---------------------------------------
    "markdown.styles": [
        "F:\\101-VsWiki\\.vscode\\CSS\\HitoriWiki.css",
    ],
    //一時待避所
    "bakpu.markdown.styles":[
        "F:\\101-VsWiki\\.vscode\\CSS\\MarkdownAllIn_vs.css",
        "F:\\101-VsWiki\\.vscode\\CSS\\HitoriWiki.css",
        "${workspaceFolder}\\CSS\\HitoriWiki.css",
    ],
    //---------------------------------------
    //markdownlintに設定するとフォーマット設定
    //---------------------------------------
    "[markdown]": {
        //"editor.defaultFormatter": "yzhang.markdown-all-in-one",
        "editor.quickSuggestions": {
            "comments": "on",
            "strings": "on",
            "other": "on"
        },
        "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
        "editor.renderControlCharacters": true, // 制御文字を表示する
        "editor.suggestSelection": "first", // サジェスト一覧の初期表示項目設定
        //"editor.fontFamily": "'Fira Code', Hasklig, Consolas, 'Courier New', monospace", // フォント設定
        "editor.fontFamily": "BIZ UDゴシック", // フォント設定
        "editor.tabSize": 2,                //タブ数
        "editor.insertSpaces": false,        //タブをスペースに変換
        "editor.fontLigatures": false,      // 合字を(有効化:true)
        "editor.renderLineHighlight": "all",// 選択行の行番号をハイライトする
        "editor.cursorBlinking": "smooth",  // カーソルが滑らかに点滅するように
        "files.autoGuessEncoding": true,    // ファイルの自動エンコードを実施
        "window.zoomLevel": 0               // 画面全体の表示サイズはデフォルト
    },

    //---------------------------------------
    //背景・文字色設定
    //---------------------------------------
    "workbench.colorCustomizations": {
        //エディタ部
        "editor.background": "#f0fdff",
        "editor.foreground": "#554158",
        "editorGroup.border": "#f3f70a9c",
        "editorLineNumber.foreground": "#afa6b0",
        "editor.selectionBackground": "#818185",
        "errorForeground": "#f42a2a",
        //エディタ部
        "editorGroupHeader.tabsBackground": "#e4e4e7",
        //タブ表示
        "tab.activeBackground": "#bebec2",
        "tab.activeForeground": "#1d1d20",
        "tab.border": "#d4d4d8",
        "tab.activeBorder": "#f4f4f5",
        "tab.inactiveBackground": "#e4e4e7",
        "tab.inactiveForeground": "#d4d4d8",
        //サイドバー部
        "sideBar.background": "#f2fff0",
        "sideBar.foreground": "#1d1d20",
        "sideBar.border": "#d4d4d8",
        "sideBarTitle.foreground": "#1d1d20",
        //ツリーリスト
        "list.activeSelectionBackground": "#d4d4d8",
        "list.hoverBackground": "#d4d4d8",
        "list.invalidItemForeground": "#d4d4d8",
        //ボタン(プラグイン等の)
        "button.background": "#56bbb8",
        //バッチ
        "badge.background": "#848490",
        //入力ボッス
        "input.background": "#e1fffe",
        "input.border": "#d4d4d8",
        "input.placeholderForeground": "#d4d4d8",
        //スクロールバー
        "scrollbarSlider.background": "#cfcfd3",
        "scrollbarSlider.hoverBackground": "#cfcfd3",
        //ステータスバー
        "statusBar.background": "#e4e4e7",
        "statusBar.foreground": "#848490",
        "statusBar.noFolderBackground": "#e4e4e7",
        "statusBar.debuggingBackground": "#e4e4e7",
        "statusBar.border": "#d4d4d8",
        "statusBarItem.prominentBackground": "#f42a2a",
        //アクティブバー(横の縦バー)
        "activityBar.background": "#d4d4d8",
        "activityBar.foreground": "#848490",
        "activityBar.border": "#d4d4d8",
        "activityBarBadge.background": "#3a3a40",
        "activityBarBadge.foreground": "#fff",
    }
}
```


## CSS設定

```css:HitoriWiki.css
/* MIT LICENSE
Copyright (c) 2020 hachian
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*//////////////////////////////////////////////*/
/* common 共通*/ 
/*//////////////////////////////////////////////*/

body {
	background-color: #e0fffffb;
	color: #1b1b1b;
  }
  
  /*//////////////////////////////////////////////*/
  /* title タイトルヘッダ　*/
  /*//////////////////////////////////////////////*/
  
  h1 {
	font-size: 36px;
	font-weight: bold;
	padding: 20px 0;
  }
  h2 {
	font-size: 22px;
	font-weight: bold;
	background-color: #33ad9d;
	color: #e5e8e8;
	padding: 10px 15px;
	border-radius: 5px;
	margin: 40px 0 10px;
  }
  h3 {
	font-size: 20px;
	font-weight: bold;
	border-left: 4px solid #16e616;
	border-bottom: 2px solid #33ad9d;
	padding: 0 10px 0;
	margin: 20px 0 10px;
  }
  h4 {
	font-size: 18px;
	font-weight: bold;
	border-left: 4px solid #e616ca;
	margin: 40px 0 10px;
	padding: 0 0 0 10px;
  }
  h5 {
	font-size: 16px;
	margin: 40px 0 10px;
	font-weight: bold;
  }
  
  /*//////////////////////////////////////////////*/
  /* tags */
  /*//////////////////////////////////////////////*/
  
  /* 区切り線 */
  hr {
	height: 1px;
	background-color: #d0d8d7;
	margin: 20px 0;
  }

  /* 斜体 */
  em {
	background: linear-gradient(transparent 80%, #e7ff46 0%);
	padding: 0 5px;
	font-style: normal;
  }

  /* 太字 */
  strong {
	padding: 0 5px;
	border-radius: 5px;
  }

  /*  */
  p code,

  /*  */
  li code,

  /* インラインコード */
  td code {
	font-family: "Consolas", "Courier New", monospace;
	background-color: #d0d8d7;
	font-size: 90%;
	font-style: normal;
	padding: 0 5px;
	border-radius: 3px;
	color: #1b1b1b;
  }


 	/* コードブロック */
 	pre {
	background-color: #ffffff !important;
	width: 80%;
}
  
  /*//////////////////////////////////////////////*/
  /* list */
  /*//////////////////////////////////////////////*/
  
  ul,
  ol {
	padding: 0 0 0.5em 1.5em;
  }
  ul > li,
  ol > li {
	position: relative;
	list-style: none;
	margin: 3px 0;
  }
/* リスト１ */
ul > li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #33ad9d;
	border-radius: 100%;
}
  /* リスト２ */
  ul ul li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.75em;
	left: -1em;
	width: 6px;
	height: 2px;
	background-color: #33ad9d;
}
  /* リスト３ */
  ul ul ul li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.5em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 2px solid #33ad9d;
	border-bottom: 2px solid #33ad9d;
	background-color: inherit;
	border-radius: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
  /* arrow */
  ul.arrow > li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.5em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 2px solid #33ad9d;
	border-bottom: 2px solid #33ad9d;
	background-color: inherit;
	border-radius: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
  
  /* check */
  ul.check > li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.5em;
	left: -1em;
	width: 8px;
	height: 3px;
	border-left: 2px solid #33ad9d;
	border-bottom: 2px solid #33ad9d;
	background-color: inherit;
	border-radius: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
  }
  
  /* ol */
  ol > li { 
	counter-increment: li;
  }
  ol > li::before {
	content: counter(li);
	display: block;
	position: absolute;
	top: .3em;
	left: -1em;
	color: #33ad9d;
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
  }
  
  /*//////////////////////////////////////////////*/
  /* table テーブル表示*/
  /*//////////////////////////////////////////////*/
  
  table {
	border-collapse: collapse;
	border: 1px solid #b7bdbc !important;
	line-height: 1.5;
	margin: 10px 0;
  }
  table th {
	padding: 10px;
	color: #e5e8e8;
	font-size: 18px;
	font-weight: bold;
	vertical-align: top;
	text-align: left;
	background: green;
	border: 1px solid #f5f5f5 !important;
  }
  table td {
	font-size: 16px;
	padding: 10px;
	vertical-align: top;
	background: white;
	border: 1px solid #b7bdbc !important;
  }
  
  /* stripe */
  table.stripe tr:nth-child(even) {
	background: #dcdfdf;
  }
  
  /* dark th */
  table.dark th {
	color: #e5e8e8;
	background: #272b2b;
  }
  
  /*//////////////////////////////////////////////*/
  /* box */
  /*//////////////////////////////////////////////*/
  .box_gray {
	background: #dcdfdf;
	border: 2px solid #b8bfbe;
	border-radius: 10px;
	margin: 20px 0;
	padding: 1em;
  }

  .box_pink {
	background: #e7d5d5;
	border: 2px solid #d47e7e;
	border-radius: 10px;
	margin: 20px 0;
	padding: 1em;
  }
  
  .box_pink ul, .box_pink ol {
	padding: 0 0 0 1.5em;
  }
  .box_pink ol > li::before {
	content: counter(li);
	display: block;
	position: absolute;
	top: .3em;
	left: -1em;
	color: #d47e7e;
	line-height: 1;
	font-weight: bold;
  }
  .box_pink ul > li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #d47e7e;
	border-radius: 100%;
  }
  
  .box_gray ul, .box_gray ol {
	padding: 0 0 0 1.5em;
  }
  .box_gray ol > li::before {
	content: counter(li);
	display: block;
	position: absolute;
	top: .3em;
	left: -1em;
	color: #b8bfbe;
	line-height: 1;
	font-weight: bold;
  }
  .box_gray ul > li::after {
	display: block;
	content: "";
	position: absolute;
	top: 0.5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #b8bfbe;
	border-radius: 100%;
  }


 /*  インラインコード(縦線) */
 /*  Light, Light+ など */
.vscode-light.showEditorSelection .code-active-line:before {
    border-left: 3px solid blue;
}

.vscode-light.showEditorSelection .code-line:hover:before {
    border-left: 3px solid #e0fffffb;
}

/* Dark, Dark+, Kimbie Dark など */
.vscode-dark.showEditorSelection .code-active-line:before {
    border-left: 3px solid yellow;
}

.vscode-dark.showEditorSelection .code-line:hover:before {
    border-left: 3px solid e0fffffb;
}

/* High Contrast */
.vscode-high-contrast.showEditorSelection .code-active-line:before {
    border-left: 3px solid red;
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
    border-left: 3px solid e0fffffb;
}
```

```css:Markdown002.css
/*
 * Title: default
 * Comment: ひとりWiki標準CSS
 * Version: 1.4.0
 * Author: MAS
 * Access: http://www2u.biglobe.ne.jp/~MAS/
 * License: CC BY(http://creativecommons.org/licenses/by/3.0/)
 */

body, input, select, textarea {
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Verdana,'ＭＳ ゴシック',sans-serif;
}
a:link {
  color:blue;
}
a:visited {
  color: purple;
}
a:active {
  color: red;
}
a:hover {
  color: red;
}
a.footnote {
  text-decoration: none;
}
a.footnote:visited {
  color: darkred;
}
a.footnote:hover {
  color: red;
}
blockquote {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: gray;
  background: whitesmoke;
  margin-left: 1.5em;
  padding: 0.5em;
}
body {
  color: black;
}
div.center {
  text-align: center;
}
div.footer {
  text-align: right;
}
div.footnote {
  border-style: solid;
  border-width: 2px 0 0 0;
  border-color: gray;
  margin-top: 2em;
  padding: 5px;
}
div.ascii-art{
  font-size: 12pt;
  line-height: 18px;
  font-family: "Mona", "IPA MONAPGOTHIC", "MS PGothic", "ＭＳ Ｐゴシック", "MS Pｺﾞｼｯｸ", "MS Pゴシック", sans-serif;
}
div.left {
  margin-left: 0.7em;
  text-align: left;
}
div.right {
  text-align: right;
}
dd {
  margin-top: 2px;
  margin-bottom: 4px;
}
dl {
  margin-left: 0.7em;
}
dt {
  border-style: dashed;
  border-color: gray;
  border-width: 0 0 1px 0;
}
h1 {
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  border-color: darkblue;
  padding: 4px;
  background-color: aliceblue;
  font-size: 150%;
  font-weight: normal;
  margin-bottom: 10px;
  text-align: center;
}
h2 {
  border-style: solid;
  border-width: 1px 1px 1px 10px;
  border-color: green;
  padding: 4px 0 3px 10px;
  background-color: mintcream;
  font-size: 150%;
  font-weight: normal;
  margin-top: 20px;
  margin-bottom: 10px;
}
h3 {
  border-style: solid;
  border-width: 0 0 1px 10px;
  border-color: darkblue;
  padding: 4px 0 3px 10px;
  font-size: 100%;
  font-weight: normal;
}
img {
  border-style: none;
}
li > p {
  margin-left: 0;
  text-indent: 0;
}
ol.list1 {
  list-style-type: decimal;
}
ol.list2 {
  list-style-type: lower-roman;
}
ol.list3 {
  list-style-type: lower-alpha;
}
p {
  margin-bottom: 0.7em;
  margin-top: 0.7em;
  margin-left: 0.7em;
}
p.hatena {
  margin-bottom: 0.5%;
  margin-top: 0.5%;
  text-indent: 1em
}
pre {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: lightsteelblue;
  margin-left: 0.7em;
  padding: 0.5em;
}
pre.inlist{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-style: dotted;
}
span.footnote {
  font-size: 75%;
  vertical-align: super;
}
span.footnote_caption {
  font-size: 80%;
  margin-left: 0.25em;
}
span.marker {
  background-color: #ffff00;
}

span.newlink-name {
  color: red;
}

table {
  margin: 0.7em;
  border-collapse: collapse;
  border-style: solid;
  border-width: 2px;
  border-color: darkblue;
}
td {
  border-style: solid;
  border-width: 1px;
  padding: 3pt;
  vertical-align: top;
}
td.center {
  text-align: center;
}
td.right {
  text-align: right;
}
th {
  background-color: lightblue;
  border-style: solid;
  border-width: 1px;
  padding: 3pt;
  vertical-align: top;
}
ul.list1 {
  list-style-type: disc;
}
ul.list2 {
  list-style-type: circle;
}
ul.list3 {
  list-style-type: square;
}

/* menubar */
div.body {
  position: relative;
}

div.main {
  margin-left: 165px;
  padding: 0 0 0 5px;
}

div.menubar {
  font-size: 90%;
  position: absolute;
  top: 0;
  width: 150px;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
}

div.menubar ul {
  margin-top: 5px;
  margin-bottom: 5px;
}

div.main2 {
  width: 75%;
  float: right;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
}

div.menubar2 {
  font-size: 90%;
  width: 24%;
  float: left;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
}

/* table of contents */

div.toc a {
  color: #668ad8;
  text-decoration: none;
}

div.toc a:hover {
  color: red;
}

div.toc ul.toc-1 {
  color: #668ad8;
  border: dashed 2px #668ad8;
  background: aliceblue;
  font-size: 90%;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 1em;
}

/*  インラインコード(縦線) */
 /*  Light, Light+ など */
 .vscode-light.showEditorSelection .code-active-line:before {
  border-left: 3px solid blue;
}

.vscode-light.showEditorSelection .code-line:hover:before {
  border-left: 3px solid #e0fffffb;
}

/* Dark, Dark+, Kimbie Dark など */
.vscode-dark.showEditorSelection .code-active-line:before {
  border-left: 3px solid yellow;
}

.vscode-dark.showEditorSelection .code-line:hover:before {
  border-left: 3px solid e0fffffb;
}

/* High Contrast */
.vscode-high-contrast.showEditorSelection .code-active-line:before {
  border-left: 3px solid red;
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
  border-left: 3px solid e0fffffb;
}

```

```css:MarkdownAllIn_vs.css
code[class*=language-], pre[class*=language-] {
	color: #393a34;
	font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	font-size: .95em;
	line-height: 1.2em;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none
}

code[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection {
	background: #c1def1
}

code[class*=language-] ::selection, code[class*=language-]::selection, pre[class*=language-] ::selection, pre[class*=language-]::selection {
	background: #c1def1
}

pre[class*=language-] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border: 1px solid #ddd;
	background-color: #fff
}

:not(pre)>code[class*=language-] {
	padding: .2em;
	padding-top: 1px;
	padding-bottom: 1px;
	background: #f8f8f8;
	border: 1px solid #ddd
}

.token.cdata, .token.comment, .token.doctype, .token.prolog {
	color: green;
	font-style: italic
}

.token.namespace {
	opacity: .7
}

.token.string {
	color: #a31515
}

.token.operator, .token.punctuation {
	color: #393a34
}

.token.boolean, .token.constant, .token.inserted, .token.number, .token.symbol, .token.url, .token.variable {
	color: #36acaa
}

.language-autohotkey .token.selector, .language-json .token.boolean, .language-json .token.number, .token.atrule, .token.attr-value, .token.keyword, code[class*=language-css] {
	color: #00f
}

.token.function {
	color: #393a34
}

.language-autohotkey .token.tag, .token.deleted {
	color: #9a050f
}

.language-autohotkey .token.keyword, .token.selector {
	color: #00009f
}

.token.bold, .token.important {
	font-weight: 700
}

.token.italic {
	font-style: italic
}

.language-json .token.property, .token.class-name {
	color: #2b91af
}

.token.selector, .token.tag {
	color: maroon
}

.token.attr-name, .token.entity, .token.property, .token.regex {
	color: red
}

.token.directive.tag .tag {
	background: #ff0;
	color: #393a34
}

.line-numbers .line-numbers-rows {
	border-right-color: #a5a5a5
}

.line-numbers-rows>span:before {
	color: #2b91af
}

.line-highlight {
	background: rgba(193, 222, 241, .2);
	background: -webkit-linear-gradient(left, rgba(193, 222, 241, .2) 70%, rgba(221, 222, 241, 0));
	background: linear-gradient(to right, rgba(193, 222, 241, .2) 70%, rgba(221, 222, 241, 0))
}

pre[data-line] {
	position: relative;
	padding: 1em 0 1em 3em
}

pre[data-line] .line-highlight-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	background-color: transparent;
	display: block;
	width: 100%
}

pre[data-line] .line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em;
	background: hsla(24, 20%, 50%, .08);
	background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
	pointer-events: none;
	line-height: inherit;
	white-space: pre
}

pre[data-line] .line-highlight:before, pre[data-line] .line-highlight[data-end]:after {
	content: attr(data-start);
	position: absolute;
	top: .4em;
	left: .6em;
	min-width: 1em;
	padding: 0 .5em;
	background-color: hsla(24, 20%, 50%, .4);
	color: #f4f1ef;
	font: bold 65%/1.5 sans-serif;
	text-align: center;
	vertical-align: .3em;
	border-radius: 999px;
	text-shadow: none;
	box-shadow: 0 1px #fff
}

pre[data-line] .line-highlight[data-end]:after {
	content: attr(data-end);
	top: auto;
	bottom: .4em
}

/*  インラインコード(縦線) */
 /*  Light, Light+ など */
 .vscode-light.showEditorSelection .code-active-line:before {
    border-left: 3px solid blue;
}

.vscode-light.showEditorSelection .code-line:hover:before {
    border-left: 3px solid #e0fffffb;
}

/* Dark, Dark+, Kimbie Dark など */
.vscode-dark.showEditorSelection .code-active-line:before {
    border-left: 3px solid yellow;
}

.vscode-dark.showEditorSelection .code-line:hover:before {
    border-left: 3px solid e0fffffb;
}

/* High Contrast */
.vscode-high-contrast.showEditorSelection .code-active-line:before {
    border-left: 3px solid red;
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
    border-left: 3px solid e0fffffb;
}

```

## ※[最小設定]json設定

### 内容

使用プラグイン
**・Markdown Preview Enhanced のみ**の設定です


```jsonc:settings.json
{
    "markdown-preview-enhanced.HTML5EmbedAudioAttributes": "controls preload=\"metadata\" width=\"1000\"",
    "markdown-preview-enhanced.HTML5EmbedVideoAttributes": "controls preload=\"metadata\" width=\"1000\" height=\"240\"",
    "explorer.fileNesting.enabled": true ,
  //ファイル関連付け設定
   "workbench.editorAssociations": {
		"*.md": "markdown-preview-enhanced"
	},
   "problems.autoReveal": false,           // レビュ11ーバーの自動表示
   "remote.autoForwardPorts": false,
  //表示しないファイル設定
  "files.exclude": {
    "**/*.code-profile": true,
    "**/*.code-workspace": true,
    "**/*.html": true
  },
}

```

```jsonc:ワークスペース.code-workspace
{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"workbench.editor.enablePreview": true ,
  //---------------------------------
  //markdown-preview プラグイン設定
  //---------------------------------

  //プレビュー拡張設定※変更後は再起動が必要です。
  //*[Previews Only]： エディターは表示されません。プレビューのみが表示されます。プレビュー内のエディターを使用してマークダウンを編集できます。
  //[Multiple Previews]： 複数のプレビューが表示されます。各エディターには独自のプレビューがあります。
  //[Single Preview]：すべてのエディターで1つのプレビューのみが表示されます。
  "markdown-preview-enhanced.previewMode": "Previews Only",
//  "markdown-preview-enhanced.previewMode": "Multiple Previews",
//  "markdown-preview-enhanced.previewMode": "Single Preview",

  "markdown-preview-enhanced.enableWikiLinkSyntax": false,
	"markdown-preview-enhanced.frontMatterRenderingOption": "table",
  "markdown-preview-enhanced.codeBlockTheme": "vs.css",       //ブロックコードのスタイル "vs.css" "coy.css"

  "markdown-preview-enhanced.enableExtendedTableSyntax": true, //表の拡張機能
  "markdown.extension.toc.updateOnSave": true,    //目次の自動更新
  "markdown.extension.toc.orderedList": false,     //目次リスト作成
  "markdown.extension.toc.unorderedList.marker": "-", //目次のマーク設定
  "comment.markdown-preview":[
      "markdown.extension.toc.slugifyMode : vscode",  //目次ID生成方法リスト作成
  ],

	},
}

```