レポート作成を想定した、VSCode の拡張機能「Markdown All in One」により Markdown から生成した HTML に対して適用するための CSS である．
Important
拡張機能によって生成される HTML が異なるため、他の拡張機能では機能しない．
style.css: @kuroyei が作成したものsindresorhus_github-markdown-css_github-markdown-light.css: sindresorhus/github-markdown-css/github-markdown-light.cssから文字列.markdown-を取り除いたもの
- 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.extension.toc.levels": "2..6"
}次のコードを 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<style>
:root {
/* 基本フォントファミリー */
/* --font-base: ; */
/* 等幅フォントファミリー */
/* --font-code: ; */
/* コードブロックのフォントサイズ */
/* --font-size-codeblock: ; */
}
</style>Note
自身でフォント等を変更したい場合は <style> を編集する．
Ctrl + Shift + P でコマンドパレットを開き、html 等と検索して [Markdown All in One: Print current document to HTML] を実行する．
生成された HTML を Web ブラウザで開き、PDF に印刷する．
-
文書名・著者名・日付
<div id="title"> # Markdown でレポートを書こう </div> <address id="author"> <span class="mono">4I14</span>   黒江 遺産 </address> <time id="date"> 2024年10月8日 </time>
-
等幅フォントで表示
class="mono"を指定する． -
2カラム
<div class="column-wrapper"> <div style="flex-basis: 47.5%;"> 左側のコンテンツ </div> <div style="flex-basis: 47.5%;"> 右側のコンテンツ </div> </div>
-
途中で改ページさせない
<div class="avoid-break"> 印刷時に改ページさせたくないコンテンツ </div>
-
その場で改ページする
<div class="break-after"></div>
-
中央揃えのキャプション付き表
表を次のタグで囲む．
<figure class="">
<figcaption> </figcaption> </figure>
表中の padding を小さくしたい場合は、
figureにクラスcompactを指定する．つまり、開始タグを次のようにする．表が表示される大きさを小さくできる．<figure class="compact">
Note
[.*] は正規表現を用いることを意味する．
-
画像
画像の幅を調整できるようにする．また、画像の下にキャプションが表示されるようにする．
Find [ .*]Replace !\[(.*)\]\((.*?)\)
<figure style="width: 70%"> <img src="$2" alt="$1"> <figcaption> $1 </figcaption> </figure>
数式中に本文と同じフォントの文字を表示するには、次の命令を使用する．
| フォント | 命令 |
|---|---|
| 基本フォントファミリー | \textsf{}, \mathsf{} |
| 等幅フォントファミリー | \texttt{}, \mathtt{} |
数式中に本文と同じ大きさの文字を表示するには、\footnotesize を使用する．
@kuroyei が使用しているマクロをご紹介する．これらはユーザー辞書に登録すると便利である．
| 目的 | マクロ | 例 |
|---|---|---|
| 文字の大きさを本文と同じにする | \newcommand\ntsize[1]{{\footnotesize #1}} |
P \ntsize{\textsf{ は正則}} |
| 単位 | \def\unit#1{\,\mathrm{\scriptsize [{#1}]}} |
9.8 \unit{kg \cdot m/s^2} |
| ネイピア数 | \def\e{\mathrm{e}} |
\e^x |
| 微分、微小量 | \def\d{\mathrm{d}} |
\d x |
| フーリエ変換 | \def\fourier{\mathcal{F}} |
\fourier[f(t)] |
| ラプラス変換 | \def\laplace{\mathcal{L}} |
\laplace[f(t)] |
| 順列 | \newcommand\perm[2]{{}_{#1}\mathrm{P}_{#2}} |
\perm{n}{r} |
| 組合せ | \newcommand\comb[2]{{}_{#1}\mathrm{C}_{#2}} |
\comb{n}{r} |
- 基本的な書き方とフォーマットの構文 - GitHub Docs
- 情報を表に編成する - GitHub Docs
- コードブロックの作成と強調表示 - GitHub Docs
- ダイアグラムの作成 - GitHub Docs
- 印刷時はオプション「背景のグラフィック」を有効にすること．
- Apple デバイスでは PDF で
box-shadowが正常に表示されない-
filter: blur(0);等を追加すれば影が描写されるが、画像の画質が下がる -
回避策:
figure { position: relative; display: inline-block; } figure::before { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); filter: blur(10px); z-index: -1; border-radius: 5px; } figure img { display: block; position: relative; z-index: 1; }
-
jsDelivr から取得される CSS が更新されない場合は Purge CDN cache - jsDelivr にてリンクを貼り付け [Purge now] する．複数回試行しなければならない場合がある．
| CSS | リンク |
|---|---|
|
|
|
- KaTeX の mhchem extension に対応する
- Noto Color Emoji を印刷できるようにする
- 絵文字を svg に置換する？
- Syntax Highlighting に対応する