個人出版・AI校正

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

個人出版・AI校正
2020.06.12

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

人気記事:電子書籍は半額で安く買える!?おすすめ比較全まとめ)!

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

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

Markdown Preview Enhanced - Visual Studio Marketplace
Extension for Visual Studio Code - Markdown Preview Enhanced ported to vscode
marketplace.visualstudio.com

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のインポート

サポートされているようです。

markdown-preview-enhanced/docs/ja-jp/file-imports.md at master · shd101wyy/markdown-preview-enhanced
One of the 'BEST' markdown preview extensions for Atom editor! - shd101wyy/markdown-preview-enhanced
github.com
 
@import "/theme-html/css/base.css"
@import "/theme-html/css/originaltheme.css"
@import "/theme-html/js/theme.js"

ただ、cssは試したところheaderに読まれるわけではないようですね。。JavaScriptもbodyの直前ではありませんでした。

このあたりがきつくてtyporaを導入しました。

typora有料化代替は!?!markdownエディタtyporaの使い方
もともとmarkdownはVS Code派だったのですが、ちょっとやりにくいことがあって一般向けのmarkdownソフトを導入してみました。(追記)typoraを使っていたのですが、エクスポートされるデータに不満があり、やっぱVS Code
ebookbrain.net

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はできました。

typora有料化代替は!?!markdownエディタtyporaの使い方
もともとmarkdownはVS Code派だったのですが、ちょっとやりにくいことがあって一般向けのmarkdownソフトを導入してみました。(追記)typoraを使っていたのですが、エクスポートされるデータに不満があり、やっぱVS Code
ebookbrain.net

画面右下にメニューボタンがでるのですよね。目次は右上がいいので右上するのもよいでしょう。

PDFのエクスポートは使える?

コードブロックやbackground-colorの背景がpdf化するとなくなる問題はChromeの印刷設定時に背景の設定を入れればOKです。

Chrome (Puppetter)
ファイル > 印刷 > 詳細設定 > 背景のグラフィックのチェックをいれる。
ファイル > 印刷 > 詳細設定 > ヘッダーフッダーのチェックをはずす。ページ数も表示されなくなります。

ただ、PDF(prince)は無料だと商用不可。

書き出しもいまいちなので、PDFはこちらのフローはやめました。今のところ、vivliostyleを使っています。

CSS組版VivliostyleはMarkdownでPDF変換におすすめ!?【VSCode】
電子書籍作成のために、PDFとePUBが作成できるvivliostyleの覚書です。現在は簡単に導入できます。技術同人誌のまとめ記事はこちらです。CSS組版Vivliostyleのおすすめ本いつのまにか本がでていました。購入したところひとと
ebookbrain.net
1user

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を使っています。その方が応用が効くので。

スポンサーリンク

Markdown-preview-enhancedのテーマを変更

noneだとテーブルの枠線がなく見にくいです。

  1. Code > Preferences > Settings(IDEによって多少違いあり。Devin > Preferences > Editor Settings)
  2. 検索欄に「Markdown-preview-enhanced: Preview Theme」

テーマはパーフェクトはないけど、solarized-dark, solarized-lightあたりがいい漢字。真っ黒は苦手。ひとまず、solarized-darkに設定。

テーブルの文字サイズを作る場合は次のとおりです。

  1. View > Command Palette > Markdown Preview Enhanced: Customize CSS
  2. ルートフォルダに.crossnoteというフォルダが作成される。
  3. style.lessを編集するとよい。

1で、GlobalとWorkspaceの2つのコマンドがあり、Workspaceならプロジェクトのみ、Globalならすべてのプロジェクトっぽいです(未検証)

To customize CSS for your markdown file, press cmd-shift-p and then run the Markdown Preview Enhanced: Customize CSS (Global) or Markdown Preview Enhanced: Customize CSS (Workspace) command.

https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/customize-css.md

グローバル(~/.local/state/crossnote/)に置く場合は設定を共通化できるメリットがある反面、プロジェクトの外に置くためGitHUBで管理できないデメリットがあります。ワークスペースに置いた場合は設定をコピペしなきゃいけない欠点があります。

Lessは「CSSの書き方を便利に拡張した言語」です。普通のCSSも、そのまま書けます。

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS.

https://lesscss.org/

プロジェクトごとに設定が必要です。

+ display: table;
+ width: 100%;
+ table-layout: fixed;
+ font-size: 14px;
+ white-space: normal;
+ overflow-wrap: anywhere;
  • display: table：テーマ側の横スクロール向け表示を、通常の表へ変更
  • width: 100%：表をプレビューの表示幅に合わせる
  • table-layout: fixed：長い文字列で列幅が広がらないようにする。
  • font-size: 14px：表だけ文字を少し小さくする
  • white-space: normal：セル内の改行を許可
  • overflow-wrap: anywhere：長い関数名やパスも、必要な場所で折り返す

通常の表では、ブラウザがセルの内容を見て列幅を調整します。

短い名前の列 → 狭くする
長い関数名の列 → 広くする

その結果、長い関数名が入ると、表全体が画面より広くなることがあります。

width: 100%;
table-layout: fixed;

この組み合わせは、「表の幅を先に決め、その幅の中で列を配置する」という指定です。今回、個別の列幅は指定していないので、基本的に列が均等に割り当てられます。長い関数名があっても、その列だけが際限なく広がりません。

.markdown-preview.markdown-preview table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.5;
}

.markdown-preview.markdown-preview table th,
.markdown-preview.markdown-preview table td {
  padding: 6px 8px;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.markdown-preview.markdown-preview table code {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  font-size: 0.95em;
}
スポンサーリンク

Markdown-preview-enhancedのプレビュー

⌘ + K → Vはサイドに開くもので見にくいという悩みがありました(右クリックやアイコンも同様)

そこで見つけたのが別のショートカット。

⌘ + Shift + Vです。他の拡張とキーがかぶっていると使えません。

ただ、ショートカットは忘れる場合があります。もう一つの方法があります。

  1. 左側のエクスプローラーでMarkdown.mdを右クリックする。
  2. 「Open With…／ファイルを開くアプリケーションの選択…」を選ぶ。
  3. 一覧から「Markdown Preview Enhanced」を選ぶ。
スポンサーリンク

vscodeでpandocの使い方

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

vscodeでpandoc 3の使い方/商用利用やライセンスは?Re:VIEWとSphinxとの比較
pandocの使い方覚書です。ePUBとHtmlの出力に主に利用しています。pandocはmarkdown preview enhancedとあわせて使うと便利です。Re:VIEWとpandocとSphinxの比較pandocを使う前にいろ
ebookbrain.net
2user
スポンサーリンク

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

markdown preview enhancedのpandoc

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

typoraのpandoc

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

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

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

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

参考になれば幸いです。

スポンサーリンク
シェアする
neruをフォローする
スポンサーリンク
neru

コメント

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