@vivliostyle/vfm
Advanced tools
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
vfm --help
vfm README.md
echo "# Hello" | vfm
vivliostyle commandnpm 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
import { stringify } from '@vivliostyle/vfm';
console.log(
stringify(`
# はじめに
{Vivliostyle|ビブリオスタイル}の世界へようこそ。
`),
);
This snippet will generates:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>はじめに</title>
</head>
<body>
<h1>はじめに</h1>
<p>
<ruby>Vivliostyle<rt>ビブリオスタイル</rt></ruby
>の世界へようこそ。
</p>
</body>
</html>
style (default: undefined)Set the specified value as the href attribute of <link rel="stylesheet">.
stringify('# Hello', { style: 'https://example.com/book.css' });
will generates:
<!doctype html>
<html>
<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>
<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>
partial (default: false)If true is specified, only the HTML defined in <body> is output.
stringify('# Hello', { partial: true });
will generates:
<p><h1>Hello</h1></p>
title (default: undefined)Set the specified value as the text of <title>.
stringify('# Hello', { title: 'Hello' });
will generates:
<!doctype html>
<html>
<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>
language (default: undefined)Set the specified value as the lang attribute of <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>
hardLineBreaks (default: false)Converts line breaks to <br>.
stringify(
`
new
line
`,
{ hardLineBreaks: true },
);
will generates:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p>
new<br />
line
</p>
</body>
</html>
disableFormatHtml (default: false)Disable automatic HTML format. Explicitly specify true if want unformatted HTML during development or debug.
stringify(
`text`,
{ disableFormatHtml: true },
);
will generates:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p>text</p>
</body>
</html>
math (default: true)Handles math syntax. The default value is true, which is valid.
stringify(
`$x = y$`
);
will generates:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body data-math-typeset="true">
<p><span class="math inline">\(x = y\)</span></p>
</body>
</html>
To explicitly disable it, specify false for this option or math: false for Markdown's Frontmatter.
stringify(
`$x = y$`,
{ math: false }
);
will generates:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>$x = y$</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');
}
Read metadata from Markdown frontmatter.
Useful if just want to get the metadata, Markdown parse and metadata typing (for TypeScript) are handled by the VFM side.
readMetadata(md: string, customKeys: string[]): Metadata
md: String Markdown text.customKeys: String[] A collection of key names to be ignored by meta processing.metadata: Metadata Metadata.import { readMetadata } from '@vivliostyle/vfm'
const md = `---
id: 'my-page'
lang: 'en'
dir: 'ltr'
class: 'my-class'
title: 'Title'
vfm:
math: false
theme: 'sample.css'
---
`;
const metadata = readMetadata(md);
console.log(metadata);
About Metadata details, refer to VFM's "Frontmatter" or type information of TypeScript.
About customKeys
Use this if want to add custom metadata with a third party tool.
Keys that are not defined as VFM are treated as meta. If you specify a key name in customKeys, the key and its data type will be preserved and stored in custom instead of meta.
import { readMetadata } from '@vivliostyle/vfm'
const md = `---
title: 'Title'
tags: ['foo', 'bar']
---
`;
const metadata = readMetadata(md, ['tags']);
console.log(metadata);
Results:
{
title: 'title',
custom: {
tags: ['foo', 'bar']
}
}
tags is stored and retained structure in custom instead of meta.
If specify a default key such as title, it will be processed as custom.
Metadata can be specified for stringify, this specification takes precedence over Frontmatter.
The following usage is assumed.
readMetadatastringify(
'# Title',
{},
{ title: 'My Page', body: [{ name: 'id', value: 'page' }] },
);
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="page">
<section id="title" class="level1">
<h1>Title</h1>
</section>
</body>
</html>
We want you to:
FAQs
Custom Markdown syntax specialized in book authoring.
The npm package @vivliostyle/vfm receives a total of 801 weekly downloads. As such, @vivliostyle/vfm popularity was classified as not popular.
We found that @vivliostyle/vfm demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers found 10 typosquatted npm packages that auto-run on install, show fake CAPTCHAs, fingerprint by IP, and deploy a credential stealer.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
