Markdown CSS

4I14 黒江遺産

2024年10月8日

Visual Studio Code の拡張機能「Markdown All in One」により Markdown から生成した HTML に対して適用するための CSS である．レポートの作成に使用することを想定している．

🐢 🐢 🐢 🐢 🐢 🐢 🐢 🐢 🐢 🐢

デモ
インストール
設定
使用方法
独自の要素
置換
注意
記法
例
- 数式
- 2カラム
- 画像
- Mermaid

デモ

インストール

Markdown All in One
Markdown Preview Mermaid Support (for Mermaid ダイアグラム)
Markdown Emoji (for 絵文字)
Markdown Footnotes (for 脚注)

設定

Ctrl + , により VSCode の設定を開き、拡張機能 Markdown All in One について次のように設定する．

{
  "markdown.extension.print.absoluteImgPath": false,
  "markdown.extension.print.includeVscodeStylesheets": false
}

使用方法

次のコードを Markdown の先頭に貼り付ける．

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kuroyei/Markdown-CSS/sindresorhus_github-markdown-css_github-markdown-light.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kuroyei/Markdown-CSS/style.css">

<style>
:root {
    /* 基本的なフォントファミリー */
    /* --font-base: ; */

    /* 等幅フォントファミリー */
    /* --font-code: ; */

    /* コードブロックのフォントサイズ */
    /* --font-size-codeblock: ; */
}
</style>

Note

自身でフォント等を変更したい場合は <style> を編集する．

独自の要素

文書名・著者名・日付

<h1 id="title">
Markdown でレポートを書こう
</h1>
<address id="author">
<span class="mono">4I14</span> &emsp; 黒江 遺産
</address>
<time id="date">
2024年10月8日
</time>

等幅フォントで表示

class="mono" を指定する．

2カラム

<div class="column-wrapper">
<div class="column-left">

左側のコンテンツ

</div>
<div class="column-right">

右側のコンテンツ

</div>
</div>

途中で改ページさせない

<div class="avoid-break">

印刷時に改ページさせたくないコンテンツ

</div>

その場で改ページする
```
<div class="break-after"></div>
```

置換

Note

[.*] は正規表現を用いることを意味する．

画像

画像の幅を調整できるようにする．また、画像の下にキャプションが表示されるようにする．
Find [.*] Replace
!\[(.*)\]$(.*?)$
<figure style="width: 70%"> <img src="$2" alt="$1"> <figcaption> $1 </figcaption> </figure>

Find [`.*`]	Replace
`!\[(.)\]\((.?)\)`	`<figure style="width: 70%"> <img src="$2" alt="$1"> <figcaption> $1 </figcaption> </figure>`

注意

印刷時はオプション「背景のグラフィック」を有効にすること．

記法

例

数式

ネイピア数 $\mathrm{e}$ や微小量を表す $\mathrm{d}$ を立体 (ローマン体) で書くのが好きです！

\newcommand\ntsize[1]{{\footnotesize #1}} \begin{align*} \int_{-\infty}^\infty {\rm e}^{-x^2} \,{\rm d} x = \sqrt\pi &&(\ntsize{\textsf{ガウス積分}}) \end{align*}

2カラム

\overset{
    {\Huge\bigcirc} \!\!\!\!\!\!\!\!\!\!\!\!\!\! \overset{{{}^{\#\#\#}}}{{}^{{}^{^\frown} \Box {}^{^\frown}}}
}{
    \overset{\circ}{\lfloor}
    \left({}^{^{\normalsize \partial}} \forall {}^{^{\normalsize\partial}}\right)
    \overset{\circ}{\rfloor}
}

{ \overset{ {\Huge\bigcirc} \!\!\!\!\!\!\!\!\!\!\!\!\!\! \overset{{{}^{\#\#\#}}}{{}^{{}^{^\frown} \Box {}^{^\frown}}} }{ \overset{\circ}{\lfloor} \left({}^{^{\normalsize \partial}} \forall {}^{^{\normalsize\partial}}\right) \overset{\circ}{\rfloor} } }

画像

Mermaid

くろえいさん🍀 はいつも次のような流れでレポートを執筆しています．

flowchart LR
    Notion --> Markdown --> HTML --> PDF