Vivliostyle で画像を挿入する

前回は、Vivliostyle のドキュメントの用紙サイズを変更しました。

今回は、Vivliostyle のドキュメントに画像を挿入してみます。画像を挿入するには、マークダウンで記述されたドキュメント ”manuscript.md” を変更するだけです。画像の挿入もマークダウン形式と同じです。とっても簡単ですね。

# {吾輩|わがはい}は猫である。 {吾輩|わがはい}は猫である。名前はまだ無い。 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ どこで生れたかとんと{見当|けんとう}がつかぬ。何でも薄暗いじめじめした所でニャー>ニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。し かもあとで聞くとそれは書生という人間中で一番{獰悪|どうあく}な種族であったそうだ>。この書生というのは時々我々を{捕|つかま}えて{煮|に}て食うという話である。しかし その当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の{掌|てのひ ら}に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである>。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの{見始|みはじめ }であろう。  この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの 顔がつるつるしてまるで{薬缶|やかん}だ。その{後|ご}猫にもだいぶ{逢|あ}ったがこん>な{片輪|かたわ}には一度も{出会|でく}わした事がない。のみならず顔の真中があまりに 突起している。そうしてその穴の中から時々ぷうぷうと{煙|けむり}を吹く。どうも{咽|>む}せぽくて実に弱った。これが人間の飲む{煙草|たばこ}というものである事はようやく この頃知った。

これを npm でビルドします。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。

? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

これをプレビューしてみます。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

出力結果です。図のキャプションも入れてくれてますね。でも "Figure" になっているのを "図"に直したいところです。



いろいろ調べたところ"vivliostyle.config.js" の language 設定を有効にすればよいようです。よくよく見たら用紙サイズもこちらで変更できますね。

mybook/themes/packages/@vivliostyle/theme-base/css/partial/page.css

を、”--vs-page--size: auto;” に戻して、今度はA4に設定してみましょう。

module.exports = {
  title: 'mybook', // populated into `publication.json`, default to `title` of the first entry or `name` in `package.json`.
  author: 'よしのたろう ', // default to `author` in `package.json` or undefined.
  language: 'ja', // default to undefined.
  size: 'A4', // paper size.
  theme: '@vivliostyle/theme-techbook@^1.0.0', // .css or local dir or npm package. default to undefined.
  entry: [
    'manuscript.md', // `title` is automatically guessed from the file (frontmatter > first heading).
  ], // `entry` can be `string` or `object` if there's only single markdown file
}

これをビルドしプレビューをしてみます。”Figure” が "図" に変更され、用紙も "A4" に変更されていました。




次は表紙を作ってみたいと思います。

---

Web技術で「本」が作れるCSS組版 Vivliostyle入門

• 出版社/メーカー: シーアンドアール研究所
• 発売日: 2023/05/12
• メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

• 作者: 石井 葵
• 出版社/メーカー: インプレス NextPublishing
• 発売日: 2019/07/12
• メディア: Kindle版

技術同人誌を書いたあなたへ ～著者のしあわせなミライ～

• 作者: mochikoAsTech
• 出版社/メーカー:
• 発売日: 2019/08/02
• メディア: Kindle版

タグ：技術同人誌 vivliostyle