Vivliostyle Flavored Markdown (VFM), a Markdown syntax optimized for book authoring. It is standardized and published for Vivliostyle and its sibling projects.
npm install -g @vivliostyle/vfm
If you want to test latest spec, run npm install -g @vivliostyle/vfm@next
instead.
vfm --help
vfm README.md
echo "# Hello" | vfm
npm i -g @vivliostyle/cli
vfm README.md --style https://raw.githubusercontent.com/jagat-xpub/cosmology/gh-pages/css/scholarly.css > book.html
vivliostyle build book.html -s A4
npm install --save @vivliostyle/vfm
# or
yarn add @vivliostyle/vfm
const { stringify } = require('@vivliostyle/vfm');
console.log(
stringify(`
# はじめに
{Vivliostyle|ビブリオスタイル}の世界へようこそ。
`),
);
This snippet will generates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>はじめに</h1>
<p>
<ruby>Vivliostyle<rt>ビブリオスタイル</rt></ruby
>の世界へようこそ。
</p>
</body>
</html>
stringify('# Hello', { style: 'https://example.com/book.css' });
will generates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://example.com/book.css" />
</head>
<body>
<p><h1>Hello</h1></p>
</body>
</html>
style
can be an array of styles.
stringify('# Hello', {
style: ['https://example.com/book.css', 'https://example.com/extra.css'],
});
will generates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://example.com/book.css" />
<link rel="stylesheet" href="https://example.com/extra.css" />
</head>
<body>
<p><h1>Hello</h1></p>
</body>
</html>
stringify('# Hello', { partial: true });
will generates:
<p><h1>Hello</h1></p>
stringify('# Hello', { title: 'Hello' });
will generates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p><h1>Hello</h1></p>
</body>
</html>
stringify('# Hello', { language: 'ja' });
will generates:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p><h1>Hello</h1></p>
</body>
</html>
import { VFM } from '@vivliostyle/vfm';
const processor = VFM({ partial: true });
const html = processor.processSync('# Hello').toString();
import unified from 'unified';
import vfm from '@vivliostyle/vfm/lib/revive-parse';
import html from '@vivliostyle/vfm/lib/revive-rehype';
function main() {
unified()
.use(vfm)
.use(customRemarkPlugin)
.use(html)
.use(customRehypePlugin)
.processSync('# Hello');
}
- Open: steadily improving through open discussion and feedback from the vast community.
- Consistent: Provides reference implementation for parsing and converting VFM to HTML, allowing other non Vivliostyle projects to use this syntax for their purposes.
We want you to:
- Join Discussion to improve spec
- Implement alpha-stage specs and send a PR
- Test beta-stage features and report a bug