【使い方】markdown preview enhancedのエクスポートとpandoc

プログラミング学習

markdown preview enhancedとpandocの簡単な覚書です。

【使い方】markdown preview enhancedのエクスポート

Markdown-pdfよりさらに機能が充実しているよう。たとえば、html出力時にサイドバーに目次が表示できます。

Markdown Preview Enhancedは、VS Codeに高度なプレビュー機能を追加し、エクスポート機能がすごいあります。

  • 変換方法が多彩です。
  • html、ePUB、mobi、PDFなど。
  • pandocも対応(要インストール)。
  • プレビュー画面も高度でVS Codeのデフォルトよりよいため、プレビュー用としての利用価値もあるかも。
一見、これでよさそうな気もしたのですが、PDFの変換にやや難がある気がしました。ただ、PSD変換はそれほどテストしていないので頑張ればなんとかできるかもしれません。。htmlのエクスポートはmarkdownエディタtyporaの方が柔軟性は高かったです。ePUBは変わらないかもしれません。

この拡張をインストールすると、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 ファイルをローカルでのみ使用する場合は、このオプションを選択します。

HTML (cdn hosted) HTML ファイルをリモートでデプロイする場合は、このオプションを選択します。

https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/html.md

外部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,

公式ドキュメントに注意書きがありました。

セキュリティを危険にさらす可能性があるので、注意してこの機能を使用してください。 スクリプトの実行が有効になっている間に、誰かが悪意のあるコードでマークダウンを開かせた場合、マシンがハッキングされる可能性があります。

設定名: enableScriptExecution

https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/code-chunk.md

また、こちら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に変換するサンプルだと、こんな感じですかね。1行目に追加します。

---
title: "ePUB変換"
author: Neru
date: March 28, 2022
output:
  custom_document:
    path: /Exports/test.epub
    toc: true
---
スポンサーリンク

vscodeでpandocの使い方

長くなりましたので別記事にしました。

スポンサーリンク

markdown preview enhancedとtyporaはどっち!?pandoc?

markdown preview enhancedのpandoc

↓やりたいことができない

typoraのpandoc

↓やりたいことができない

pandoc(プレビューのみmarkdown preview enhanced)

数日間右往左往しましたが、現在はpandocを使っています。

やりたいことができないというのはエクスポート時に書きだされるソースコードが微妙で、結局一番どうにでもできるpandoc単体で使うのがいいのかな、となりました。

参考になれば幸いです。

コメント

タイトルとURLをコピーしました