VScode　Markdown　装飾方法一覧

2024.07.31

VScodeのMarkdownでちょっとした説明は大事ですね。　少しでも見やすくする装飾方法です。　私のお気に入りは、背景色変更、見出し、項目、水平線、LaTex、HTML記法です。

  • 先頭に『#, *, -, 1, >, `, —』などの記号や数字を使いますが、全て半角です。
  • 記号の前後にスペースが必要な場合は半角スペースです。
  • 編集モードでは装飾効果は見えません。　『Shift+ENTER』でPreviewモードに移行すると装飾の効果がわかります。
  • Markdown内にHTMLで記入できます。

見出し

# 見出し1
## 見出し2
### 見出し3

強調

*イタリック* _イタリック_
**ボールド** __ボールド__
~~取り消し~~

項目

  • 『-』の後に半角スペース1個必要
  • サブ項目の場合『-』の前に半角スペース２個必要
  • 『-』でも『*』でも同じ

- 項目1
- 項目2
  - サブ項目
    - サブサブ項目

* 項目1
* 項目2
  * サブ項目
    * サブサブ項目

番号付き

  • 番号付きの場合、サブは使えません。
  • 番号付きの下に無理やりサブを使おうとすると、その下のようにHTMLで記述する方法があります。
1. 項目1
2. 項目2

<ol>
  <li>項目１
    <ul>
      <li>サブ１</li>
      <li>サブ２</li>
    </ul>
  </li>
  <li>項目２
      <li>サブ１</li>
      <li>サブ２</li>
  </li>
</ol>

引用

> 引用

或いは

<blockquote style="background:blue;">これも</blockquote>

リンク

[リンクのテキスト](http://example.com)
![代替テキスト](http://example.com/image.jpg)

コードブロック

これは`インラインコード`です。

```Python
// コードブロック
print('Hello, World!')
```

```javascript
// コードブロック
console.log('Hello, World!');
```

上記以外以下なども使えます。

  • html
  • css
  • java
  • cpp
  • bash
  • sql
  • json
  • markdown ——これを指定すると言語シンタックスは適用されません。（プレーンテキスト）

水平線

***
---
___

数式（LaTex)

$$
f(x)=\frac{1}{x^k}
$$

表

|項目|説明|
|-|-|
|1|2|
|3|4|

背景色

ちょっと面倒臭いけど、各markdownにHTMLの<style>タグ内に『#preview』と指定して、backgroundで色指定する。　その下に表示したい文字を入れる。

<style>
    #preview {
        background:red;
    }
</style>

* 風速の異常値　−9999を0にする

１行にしても同じ動作します。

<style>#preview {background:red;}</style>

* 風速の異常値　−9999を0にする
  • 引用部の背景色変更等は、<style> blockquote{background:blue;}</style>の様に指定できます。

MarkdownのカスタムCSS　動作しませんでした

  • カスタムCSSは使えないみたいです。　以下も試しましたが効果ありませんでした。
  • setting.jsonは、
    • VScodeの左下の歯車から、『settings』をクリック
    • settingsが開いたら、左上の『User』、『Workspace』、今いるフォルダから選択
    • 検索フィールドに『setting』と入力
    • 『Edit in settings.json』を見つけてクリックするとsettings.jsonを編集できます。
settings.json
"markdown.styles": [
  "path/to/your/styles.css"
]
path/to/your/styles.css
#preview{
    background:green;
}

コメント