3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vscodeの設定用json + markdown pdf

Last updated at Posted at 2021-11-15

場所

既定の(デフォルト)設定

所在不明,呼び出しても読み取り専用エディタとして出てくるだけ,どこに実体があるのかはさっぱり…

ユーザー(グローバル)設定

/Users/[ユーザ名]/Library/Application Support/Code/User/settings.json

普段から使い回したい設定は全てこちらに書いておく,latexmk用の起爆ソースとか

デフォルト設定をオーバーライドできる,対象はほぼ全てのオプション

ワークスペース(ウィンドウ)設定

workspace.code-workspace

ワークスペースで限定的に使いたい時に書く,エディタのテーマを切り替えるとか

グローバル設定をオーバーライドできる,対象はほぼ全てのオプション

vscodeのワークスペースとは即ちウィンドウ1つのこと,処理のカスタマイズはなるべく書かない方が良い気がする

フォルダー(ローカル)設定

.vscode/settings.json

処理のカスタマイズなど環境を汚染したくない時に書く,今回はココを弄ってみる

各ディレクトリに1つだけ作成できて,ワークスペースを含めてそのフォルダを開いたら必ず共有される

なおworkspace.code-workspaceが存在しない場合はなぜかこれがワークスペース設定としてGUIに表示されるし,設定範囲はワークスペース設定と同じになっている,意味不明というか初見のユーザーに優しくないね…

ローカル設定をオーバーライドできる,対象は一部のオプション(ここでしか変えられないものもあるみたいだが…)

使い所

試しにmarkdown pdfの書式を弄ってみる

以下コピペ

書式の一例,.vscode/settings.jsonに以下をコピペして成形すると良い

settings.json
{
    "markdown-pdf.headerTemplate":
        "<div style=\"font-size: 12px; margin:0 12px 0 12px; width:60%;\"><span style=\"float: left;\">ここにタイトル</span></div> <div style=\"font-size: 12px; margin:0 12px 0 12px; width:30%;\"><span style=\"float: left;\">ここに名前</span></div> <div style=\"font-size: 12px; margin:0 12px 0 12px; width:10%;\"><span style=\"float: right;\" class='date'></span></div>",
    "markdown-pdf.footerTemplate":
        "<div style=\"font-size: 12px; margin:0 12px 0 12px; width:60%;\"><span style=\"float: right;\">ここに署名</span></div> <div style=\"font-size: 9px; margin:0 12px 0 12px; width:40%;\" ><span class='pageNumber'></span> ページ目 / <span class='totalPages'></span> ページ中</div>"
}

どうやら環境変数や引数をブチ込むみたいな芸当はこれだけでは無理らしい(できるの?)

バグ?

<span class='pageNumber'></span><span class='totalPages'></span>は現在ページと合計ページをそれぞれ出力する,しかし内外からその文字サイズを9pxより大きく設定してしまうとなぜか表示されなくなって詰む

また最外の<div>に上下向きのmarginを設定するとレイアウトが崩れてフッタが本文に隠されてしまい詰む,それどころかpaddingしても詰むし文字が大きすぎても詰むので,あまり大きく弄らない方が吉

前者はmarkdown pdfがやりたいhtml+cssにおける動的な注入に対して不都合であり,どうやらmarkdown-pdfのさらに実装元のプラグインであるpuppeteerにまで問題が遡るらしい,"puppeteer"+"pageNumber"+"font size"で検索してみれば「10pxにすると出ますよ」「9pxにすると出ますよ」みたいな内容が見つかる

後者はmarkdown-pdf > margin:bottommarkdown-pdf > margin:topの値を弄れば解決するが,あんまり大きくても見栄えが悪いし何ならタイトルページは別に作れば良いので,なるべくはスマートになるよう心がけよう

LaTeXとの比較

Markdownなので機能が軽いとは言えど学習コストも抑えられて設定も楽でコンパイルも手間や時間がかからずhtmlもodfも生成できると考えるとクッソ良い(個人の感想)

サンプル

htmlの時点でこんな感じ

見出しは6段階までらしい

test.md
# welcome

## to

### my

#### slightly

##### beautiful

###### dream

####### ...?


OK.

````zsh
sudo rm -rf /

$$
e^{i \pi} + 1 = 0
$$

$$
\begin{pmatrix}
1 & 0 \\
0 & 1
\end{pmatrix} \\
against, \\
\begin{vmatrix}
1 & 0 \\
0 & 1
\end{vmatrix}
$$

この世をば 我が世とぞ思ふ 望月の

欠けたることも 無しと思へば


```change.css
body {
    color: white;
	background-color: black
}
settings.json
{
    "markdown-pdf.headerTemplate":
        "<div style=\"font-size: 12px; margin:0 12px 0 12px; width:60%;\"><span style=\"float: left;\">this is my report</span></div> <div style=\"font-size: 12px; margin:0 12px 0 12px; width:30%;\"><span style=\"float: left;\">Soluna Eureka</span></div> <div style=\"font-size: 12px; margin:0 12px 0 12px; width:10%;\"><span style=\"float: right;\" class='date'></span></div>",
    "markdown-pdf.footerTemplate":
        "<div style=\"font-size: 12px; margin:0 12px 0 12px; width:60%;\"><span style=\"float: right;\">tuned by S.E.</span></div> <div style=\"font-size: 9px; margin:0 12px 0 12px; width:40%;\" ><span class='pageNumber'></span> page of <span class='totalPages'></span> pages </div>",
    "markdown-pdf.margin.top": "2cm",
    "markdown-pdf.margin.bottom": "2cm",
    "markdown-pdf.highlightStyle": "night-owl.css",
    "markdown-pdf.styles": [
        "./change.css"
    ],
    "markdown-pdf.type": [
        "pdf",
        "html"
    ],
    "markdown-pdf.orientation": "landscape",
    "markdown-pdf.convertOnSave": true,
}

なんと無理矢理に横長にできてしまうし背景色もコードブロックのスタイルも弄れるのだ

だがpdfにすると余白領域が真っ白のまま,ダサ過ぎないか…?

コアのカスタマイズ

タイムアウトの阻止

いくらmdファイルが長くともhtmlレンダリングは一瞬で終わるが,pdfレンダリングは処理時間が30000ms(30秒)をオーバーして強制停止されることでお目当てのブツがエクスポートされないケースがある.だいたいpuppeteerの仕様のせいだが元々は異常動作をさせないためにかけられた防御であって,これをクリアするには手動でtimeout時間を0に設定する必要がある(その代わりセキュリティリスクは高まるらしいが).

具体的には/Users/[ユーザ名]/.vscode/extensions/yzane.markdown-pdf-[バージョン表記]/extension.jsの407行目あたりで

await page.goto(vscode.Uri.file(tmpfilename).toString(), { waitUntil: 'networkidle0', timeout:0});

要はawaitの呼び出し先の関数page.gotoの引数にtimeout:0を入れてやれば良い.

行数が違くても下の行に

// generate pdf
// https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions

とか書いてあるしわかりやすいと思われる.つーか多分このことを言ってるんじゃないかな…?

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?