VSCODE+MarkdownでキレイなPDFとHTMLを出力して、TRPGシナリオリリース当日まで寝て過ごす。
VSCODE+MarkdownでキレイなPDFとHTMLを出力して、TRPGシナリオリリース当日まで寝て過ごす。
type
status
date
slug
summary
tags
category
icon
password
頒布
システム
シナリオタイプ
プレイ人数
時間
推奨技能
タグ
シリーズ
 
前日の方の記事は「同人誌制作」のようなので気になる方は是非そちらも。
 
 
どうも、竜原です。 アドカレ7日目で緊張しています。なんてったって7日目世界に光が満ちたわけです。7日目となるとやっぱり満たさないといけないんですよ、”光”で。
満たしましょう、”楽”という光で……。
 
Markdown+TyporaでCoCシナリオを書き始めて約1年ほどになります。毎回書くことに集中できる環境に感謝しながら、Markdownってすっげーや……という感情になっている昨今です。 Markdownで書かない理由がもはや無いまである。
 
 
 

MarkdownからPDFはハードルが高い…?

でも、フレンズに勧めるのにTyporaでの出力はハードルが高い。 その理由は「Pandoc」にある。
 
 
Pandocはコマンドラインからコマンドを入力して直接Markdownを様々なファイルに変換してくれるやつです。(WordをMarkdownにするとかもできる)
変換時に間にLuaフィルターというスクリプトをいっちょ噛ませることで、更にキレイに整形することができます。Luaフィルターによって私は、Markdown本文内から共有メモ部分だけを抜き出してテキストファイルに出力させたり、ココフォリアのコマJSONに置き換えたエネミーステータスのテキストファイルを出力させたりしています。操れると便利だけど、そのハードルはエベレスト。触るな危険、Luaフィルター。半月溶けるぞ。
 
兎にも角にも、現状キレイなPDFをMarkdownから出力するために必要な「Pandoc」のインストールのハードルが、なんだか……ちょっと、高い……。Path通さないとダメとか、そもそもPowershellとかコマンドライン起動して真っ黒い画面のあそこに打ち込むとか恐怖を感じるのは私だけか……?(最近ようやく慣れました)
Pandocをインストールして、Typoraのエクスポート設定にコマンドをコピペするだけといえばそうなんですが、そもそもTypora有料だしな……(更新も稀だから最近ビビってる)
 
なので、フレンズに勧めるには(アホな私には)とても説明が難しい。 もっと楽に…………
 
もっと楽にできるものはないのか???
たとえば……無料のソフトで……メジャーどころで……
使うのに色んなサイトで説明解説されているような……でっけえ規模の……
 
 
VisualStudioCode の拡張機能とかに
 
 

Markdown-PDF

 
あった。
Markdown-PDFはVisual Studio Codeの拡張機能で、MarkdownファイルをPDF、HTML、PNG、JPEGファイルに変換してくれます。 設定は参考サイトや日本語Readmeを御覧ください。
 
 
参考サイト
 
拡張機能をインストールしてMarkdownを開き、そのまま右クリックで「EXPORT(PDF)」を選ぶだけでPDFが出力されます。デフォルトでかなりキレイなので結構Good。
 

Markdown-it-container対応

デフォルトでMarkdown-it-containerに対応しているため、簡単なコードでKP情報などを実装できる。これはうれしい。

Markdown-it-Include対応

あとは、 markdown-it-includeが地味に便利。これは別ファイルを挿入させることができるんですが、これができるということは……分割執筆が簡単にできるということで……。
index.md
こんなふうに書いておけば、導入~シティ探索のMarkdownファイルを挿入して1枚のPDFとかにしてくれるわけです。便利か~~~~?
リポジトリのIssuesにも詳しく書いてくれています。

mermaidに対応

シナリオでも使っているフローチャートは全てMermaidで書いてます。それがここでも対応してくれているのはなんとまあありがたいことか……。 ただし、デフォルトの設定だとMermaidがうまく表示されないので、プラグイン設定の【markdown-pdf.mermaidServer】の項目を以下のものに変えておくといいとおもいます。これだときちんとMermaidが表示された。

改ページができる

改ページしたいときには、以下のタグをちょいと入れ込めばPDF上で改ページされます。

自分の設定

これらはSetting.jsonで設定できますが、普通に拡張機能専用の設定画面でも弄れます。
 
JSONで書くのわけわからんという場合は、VSCODEの設定を開いて、「設定の検索」のところに@ext:yzane.markdown-pdfをいれると、Markdown-PDF拡張機能の設定がずら~とでてきます。上記に書いてない部分の設定はデフォルトのままです。
 

いい感じのStyleを適用したい

  "markdown-pdf.styles"の項目では、変換時に適用させるCSSを指定することができます。先ほどの設定では同フォルダ内にあるStyle.cssを指定しています。   いい感じに設定した「style.css」などの適当な名前で保存して、同じフォルダにいれて、先程の設定項目で指定してやると……。
 
notion image
こんな感じになります。かなりキレイ。こんなふうにしなくてもデフォルトのままでもキレイなのでやらなくていいといえばいい。もっとCSSのセンスがある人はうまくやれるとおもいます。
以下のCSSを適用させると、画像のようになります。いぇい。
 
 

これで…

Markdownで本文さえかけばあとはVSCODEで開いて、右クリックでPDF出力ができるようになりました。えぐいて。
 
ただし、HTML出力のときは一度HTMLファイルを開いて、CSSがどのようなアドレスで仕込まれているか確認しましょう。相対参照されていない場合、頒布してもCSSが適用されていないなんてことがあります。(絶対参照のフルアドレスだとユーザー名やフォルダ名に本名いれていると大変なことになる) まあ……HTML出力は、その辺りをチェックしたり諸々うまくやれたらかなり戦力だと思いました。
 
これで、リリース当日ギリギリまで寝ていられるようになりました。 シナリオ本文に注力できる時間が出来てとても嬉しいです。リリースすること自体をうっかり忘れないように。(私はやらかしました)
 

次回予告

 
次回、私の担当である【非公式卓すきアドカレ2024 ② Advent Calendar 202421日目の記事では、禁断の「フローチャートを書いたらもうシナリオが出来上がる」的な記事とスクリプトを出そうと思います。お手元に「Obsidian」をご用意してお待ち下さい。
 
間に合わなかったら、Markdownで書いたシナリオをみやすいテキストファイルにコンバートするサイトを公開します。
 
実はその前に、『辛さを爆破する(したい)食事メニュー表』にも参加します。こちらは14日です。内容は、ポップコーンを食べろ です。対戦よろしくお願いします。食べろ
 

書いた人

notion image

竜原

個人サークル『-273℃』 合同サークル『喫茶食堂』所属 現在CoC6版&7版)を中心に同人シナリオを作りながらのんびりしています。映画とポップコーンが大好き 企画やお仕事のご依頼もお気軽にご相談ください