イントロダクション
今まで作成してきたブログ(技術ブログ)をまとめようと思いました。しかし、自分はデザインなどの経験がなく、絵も描けない。。。
ならば、何かしら自分の畑にあるものを使いたいと考えたのが「VSCodeでMarkDownを使用して電子書籍を作成する」ということです。
ポイントとしては、VSCodeでMD(MarkDown)を書く事のメリットとしては、MDからHTMLやPDFなどの別フォーマットへ出力することができるというところです。
しかし、レイアウトを工夫したり、背景画像の設定が行いずらい部分もあるので、HTMLからEPUBやPDFに出力することを考えいます。
HTMLから返還するべきファイル形式を調べる
つまるところは、電子書籍販売時のファイル形式を調査するということです。
結論は以下の3種類が、主だったファイル形式でした。
- HTML
- EPUB
VzSCodeでは、「MarkDown PDF」というエクステンションがあります。
まずは、これを使って自分の作りたいものを作れるように頑張りたいと思う次第です。
MarkDown-PDF
Githubにて公開されているエクステンションです。これは以下の機能をサポートしているという記述がありました。
機能
- 構文の強調表示
- 絵文字
- マークダウンイットチェックボックス
- マークダウンイットコンテナ
- マークダウンイットインクルード
- プラントUML -> マークダウン・イット・プラントムル
- マーメイド
単語だけ並べてもわからないので、それを調べます。。。
まずはセットアップ
VSCodeでエクステンションを追加します。
がエクステンションのアイコンです。これをクリックすると下のように見えます。
筆者のVSCodeでは「HTML Preview」と「Markdown PDF」のエクステンションがインストールされています。
ワークスペースの設定をする
File -> Save Workspace As ... を選択します。
すると「XXX.code-workspace」のようなファイルが作成されます。
このファイルはJSONファイルで、単純に設定情報を定義するものになっています。
{
"folders": [
{
"path": "."
}
],
"settings": {}
}MarkDown PDFの設定を入れる
今回は、MarkDown PDFでCSSを適用したかったので下のように設定を書きました。「markdown-pdf.styles」というプロパティ(オプション)にCSSを指定しました。GithubのCSSです。ここからダウンロード(chekout)できます。そして、自分の作成する予定のCSS「test.css」も追加しています。
{
"folders": [
{
"path": "."
}
],
"settings": {
"markdown-pdf.styles": ["./github-markdown-light.css", "./test.css"]
}
}test.cssには下のようなCSSを書いています。
@charset "utf-8";
.sam { color:red}
MDファイルには下のように書いています。
## テスト
<p class="sam">サンプル文字</p>この状態で、PDF出力してみます。
上のように出力されました。CSSはHTML作成するものと同じです。しかし、MDでクラスを指定する方法がわかりません。
わからないなら調べればよいので、調べます。
MDにクラス属性を指定する
こちらのサイトを参考にしました。
【Markdown】
IDの設定：# Header 1 {#header1}
CLASSの設定：## The Site {.main}【HTML】
<h1 id="header1">Header 1</h1>
<h2 class="main" id="the-site">The Site</h2>改ページを入れる
下のコードを追加するとそれ以下のコードは次のページに配置されます。
<div style="page-break-before:always"></div>想定外なところ
見出しにはクラス属性を指定できたが、段落などの指定ができなかった。
なぜだろう？他のサイトを見ても同じようなやり方をしている。。。
ちょっと迷宮入りかもしれない。
複数カラムのレイアウト
- Ctrl + Shift + P を押下
- Markdown Preview Enhanced: Customize CSSをクリック
- CSS(style.less)でCSSを作成
- Ctrl + Shift + Vでプレビューを表示
- 右クリックしてPDFを出力する
作成したCSSは以下の通りです。
.column-left{
float: left;
width: 57.5%;
text-align: left;
}
.column-right{
float: right;
width: 37.5%;
text-align: left;
}MarkDownには下のように記述
<section class="column-left">
....
</section>
<section class="column-right">
....
</section>
Emoji(絵文字)を使う
- VS Code 拡張機能セクションからMardown Emojiをインストールします。
- 次のように 2 つのコロンの間に必要な絵文字の名前を入力します。「:smile:」
絵文字のリストはこちらのページにあります。
E-Book出力
こちらのページに必要なアプリケーションが記載されていました。
筆者の場合はWindowsを使用しているので、MSI、インストーラーでインストールできました。「ebook-convert」というのは起動ファイルのことでMSIでインストールしたら、$PATHには追加されるので問題ありません。
