markdown preview enhancedとpandocの簡単な覚書です。
目次
【使い方】markdown preview enhancedのエクスポート
Markdown-pdfよりさらに機能が充実しているよう。たとえば、html出力時にサイドバーに目次が表示できます。
Markdown Preview Enhancedは、VS Codeに高度なプレビュー機能を追加し、エクスポート機能がすごいあります。
この拡張をインストールすると、mdファイルを開いたとき画面右上にプレビューボタンが追加されます。そのプレビュー画面で右クリックすると、いろいろとできます。
Open in BrowserとクリックするとHtmlファイルが確認できるため、Chromeの検証をみてデバッグするのにもよさそうです。
CSSのカスタマイズ
CSSをカスタマイズする方法は次のとおりです。
コマンドパレットを実行します。
View > Command Palette > Markdown Preview Enhanced: Customize CSS
開いたファイルにCSSを記述するとOKです。
.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
* {
overflow: visible;
font-family: Meiryo, sans-serif;
}
h1 {
padding: 0.5em;
background-color: #eee9d3;
border: none;
border-left: 24px solid #8fb0a9;
}
}なお、このファイルは共通のものになりますから他の本(VsCodeのプロジェクト)でもを作ったときも、このCSSが適応されます。
エクスポートhtmlとebookの違い
htmlの書き出しはいくつかあります。通常のhtmlとebookのhtmlの違いを調べました。
ebookの方はgitbookちっくになっているようです。ebookは右クリックで簡単にスタイルを指定し、そのまま書き出すことができます。
GitBook に触発されました。
https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/ebook.md
通常のhtmlはローカルとリモートの使い分けが必要です。プレーンな書き出しですがオプションがいろいろあります。
HTML (offline)この html ファイルをローカルでのみ使用する場合は、このオプションを選択します。https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/html.md
HTML (cdn hosted)HTML ファイルをリモートでデプロイする場合は、このオプションを選択します。
外部cssやJavaScriptのインポート
サポートされているようです。
@import "/theme-html/css/base.css"
@import "/theme-html/css/originaltheme.css"
@import "/theme-html/js/theme.js"ただ、cssは試したところheaderに読まれるわけではないようですね。。JavaScriptもbodyの直前ではありませんでした。
このあたりがきつくてtyporaを導入しました。
htmlエクスポート時にサイドバー
html出力時の目次は次の2つが必要です。
mdファイルに次の記述。
---
html:
embed_local_images: false
embed_svg: true
offline: false
toc: true
print_background: false
---setting.jsonに次の記述。
"markdown-preview-enhanced.enableScriptExecution": true,公式ドキュメントに注意書きがありました。
セキュリティを危険にさらす可能性があるので、注意してこの機能を使用してください。 スクリプトの実行が有効になっている間に、誰かが悪意のあるコードでマークダウンを開かせた場合、マシンがハッキングされる可能性があります。
設定名:
https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/code-chunk.mdenableScriptExecution
また、こちらhtmlの書き出ししか対応しておらず、ebookの方はサイドバーがつかないようですね。
つまりスタイルを適応させながら目次をつけることが基本設定ではできないようです。markdownエディタのtyporaはできました。
画面右下にメニューボタンがでるのですよね。目次は右上がいいので右上するのもよいでしょう。
PDFのエクスポートは使える?
コードブロックやbackground-colorの背景がpdf化するとなくなる問題はChromeの印刷設定時に背景の設定を入れればOKです。
Chrome (Puppetter)
ファイル > 印刷 > 詳細設定 > 背景のグラフィックのチェックをいれる。
ファイル > 印刷 > 詳細設定 > ヘッダーフッダーのチェックをはずす。ページ数も表示されなくなります。
ただ、PDF(prince)は無料だと商用不可。
書き出しもいまいちなので、PDFはこちらのフローはやめました。今のところ、vivliostyleを使っています。
markdown preview enhancedでpandocを使う方法
pandocをインストールしても普通に書き出すとエラーになりますね。
Error: Output format needs to be specified.エクスポート用のフォーマット指定が必要です。
mdファイル側にパーサーの指定、フロントマターの設定が必要です。パーサ(parser) とは構文解析を行う処理、フロントマターとは本の前付けのことでWebでいうとヘッダー情報を指定してあげる感じでしょうか。公式のドキュメントをみるのがよさそうです。
ちなみにePUBに変換するサンプルだと、こんな感じですかね。１行目に追加します。
---
title: "ePUB変換"
author: Neru
date: March 28, 2022
output:
custom_document:
path: /Exports/test.epub
toc: true
---現在はmarkdown preview enhanceではなく、普通にpandocを使っています。その方が応用が効くので。
vscodeでpandocの使い方
長くなりましたので別記事にしました。
markdown preview enhancedとtyporaはどっち!?pandoc?
markdown preview enhancedのpandoc
↓やりたいことができない
typoraのpandoc
↓やりたいことができない
pandoc(プレビューのみmarkdown preview enhanced)
数日間右往左往しましたが、現在はpandocを使っています。
やりたいことができないというのはエクスポート時に書きだされるソースコードが微妙で、結局一番どうにでもできるpandoc単体で使うのがいいのかな、となりました。
参考になれば幸いです。
コメント