サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
vivliostyle.github.io
はじめましてこんにちは、はるさめです。本誌は名目上 Vivliostyle について紹介する同人誌なのですが、またしても空気を読まず Vivliostyle ではない OSS プロジェクト「Remark」について紹介したいと思います。 Remark Remark とは「Markdown processor」という紹介文の通り、Remark で書かれたテキストを読み込み様々な変換を施すことができる JavaScript 製のライブラリです。Remark は様々なライブラリと組み合わせて目的の形式のテキストに変換でき、Rehype と一緒に使うことで Markdown を HTML に変換できます。同様の処理をしてくれるライブラリとしては Marked.js が有名ですが、Remark の強力な機能は、Markdown を 抽象構文木（AST）に変換することで、より柔軟に構文を改造できる点です
Vivliostyle は、CSS 組版で本を作るためのツールとして、少しずつ知られるようになってきたかと思います。そして、最近の更新では、目次ナビゲーション機能、Web Publications 対応など、Web／電子出版ビューアとしても、使い勝手のよいものを目指しています。この「Vivliostyle Viewer で CSS 組版ちょっと入門」では、Vivliostyle Viewer でできることを中心にした CSS 組版のちょっとだけ入門を書いてみます。 Vivliostyle Viewer の紹介 Vivliostyle Viewerhttps://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html は、ブラウザ上で動作する CSS 組版エンジン vivliostyle.js とビューア UI
文章構造を生成する Pug を採用しました。HTML タグの括弧を書かないのでレビュー時に文章が見やすいことと、要素にクラスを付与したりスタイルを直書きしたりしても記法が変わらないこと（候補にマークダウンがあったが、マークダウン記法に HTML 記法が混ざるのがあまり好きではない）が理由です。 また、PDF 生成時に数式の表示やシンタックスハイライトの有効化を行うため、ここで前処理をします。Pug の filter 機能を用いて、Pug 形式で書かれた数式を MathJax 形式に、コードブロックを Prism.js 形式に変換します。詳細な例は割愛しますが、文字列を受け取って決められたクラスを持つ要素の中に入れる、という処理になります。 スタイルと文章構造の生成は、gulp で該当ファイルを監視し、ファイルの保存をトリガーとして生成を行い、結果をブラウザで確認する、という流れになります。
Vivliostyle Viewer (version: 2019.11.100-pre) Supported document types: (X)HTML document, with CSS for paged media Web publication (a collection of HTML documents): specify URL of the primary entry page or manifest file. Unzipped EPUB: specify URL of OPF file or top directory of the unzipped EPUB files. Notes: GitHub and Gist URLs can be directly specified. Vivliostyle loads raw github/gist conten
Redirecting... Click here if you are not redirected.
このページを最初にブックマークしてみませんか？
『vivliostyle.github.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
