作者:Titus Wormer
GitHub 风味 Markdown(GFM)
本指南探讨了如何支持 GFM 特性,如自动链接字面量、 脚注、删除线、表格和任务列表。 MDX 支持标准 Markdown 语法(CommonMark)。 这意味着 GitHub 风味 Markdown(GFM) 扩展默认不受 支持。 它们可以通过 remark 插件 remark-gfm 来启用。 该插件与所有 remark 插件一样,可以在 ProcessorOptions 中的 remarkPlugins 中传递。 有关插件的更多信息请参见§ 扩展 MDX
假设我们有这样一个 MDX 文件:
# GFM
## 自动链接字面量
www.example.com, https://example.com, and contact@example.com.
## 脚注
一个注释[^1]
[^1]: 大注释。
## 删除线
~一个~ 或 ~~两个~~ 波浪号。
## 表格
| a | b | c | d |
| - | :- | -: | :-: |
## 任务列表
* [ ] 待办
* [x] 已完成
上面的带 GFM 的 MDX 可以用以下模块转换:
import fs from 'node:fs/promises'
import {compile} from '@mdx-js/mdx'
import remarkGfm from 'remark-gfm'
console.log(
String(
await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]})
)
)
(alias) module "node:fs/promises"
import fs(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compileCompile MDX to JS.
- @param vfileCompatible MDX document to parse.
- @param compileOptions Compile configuration (optional).
- @return Promise to compiled file.
(alias) function remarkGfm(options?: Options | null | undefined): undefined
import remarkGfmAdd support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).
- @param options Configuration (optional).
- @returns Nothing.
namespace console
var console: ConsoleThe console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Consoleclass with methods such asconsole.log(),console.error()andconsole.warn()that can be used to write to any Node.js stream. - A global
consoleinstance configured to write toprocess.stdoutandprocess.stderr. The globalconsolecan be used without importing thenode:consolemodule.
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
- @see source
(method) Console.log(message?: any, ...optionalParams: any[]): voidPrints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
- @since v0.1.100
var String: StringConstructor
(value?: any) => stringAllows manipulation and formatting of text strings and determination and location of substrings within strings.
(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compileCompile MDX to JS.
- @param vfileCompatible MDX document to parse.
- @param compileOptions Compile configuration (optional).
- @return Promise to compiled file.
(alias) module "node:fs/promises"
import fsfunction readFile(path: PathLike | fs.FileHandle, options?: ({
encoding?: null | undefined;
flag?: OpenMode | undefined;
} & EventEmitter<T extends EventMap<T> = DefaultEventMap>.Abortable) | null): Promise<NonSharedBuffer> (+2 overloads)Asynchronously reads the entire contents of a file.
If no encoding is specified (using options.encoding), the data is returned as a Buffer object. Otherwise, the data will be a string.
If options is a string, then it specifies the encoding.
When the path is a directory, the behavior of fsPromises.readFile() is platform-specific. On macOS, Linux, and Windows, the promise will be rejected with an error. On FreeBSD, a representation of the directory's contents will be returned.
An example of reading a package.json file located in the same directory of the running code:
import { readFile } from 'node:fs/promises';
try {
const filePath = new URL('./package.json', import.meta.url);
const contents = await readFile(filePath, { encoding: 'utf8' });
console.log(contents);
} catch (err) {
console.error(err.message);
}
It is possible to abort an ongoing readFile using an AbortSignal. If a request is aborted the promise returned is rejected with an AbortError:
import { readFile } from 'node:fs/promises';
try {
const controller = new AbortController();
const { signal } = controller;
const promise = readFile(fileName, { signal });
// Abort the request before the promise settles.
controller.abort();
await promise;
} catch (err) {
// When a request is aborted - err is an AbortError
console.error(err);
}
Aborting an ongoing request does not abort individual operating system requests but rather the internal buffering fs.readFile performs.
Any specified FileHandle has to support reading.
- @since v10.0.0
- @param path filename or
FileHandle - @return Fulfills with the contents of the file.
(property) remarkPlugins?: PluggableList | null | undefinedList of remark plugins (optional).
(alias) function remarkGfm(options?: Options | null | undefined): undefined
import remarkGfmAdd support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).
- @param options Configuration (optional).
- @returns Nothing.
展开等价 JSX
<>
<h1>GFM</h1>
<h2>Autolink literals</h2>
<p>
<a href="http://www.example.com">www.example.com</a>,{' '}
<a href="https://example.com">https://example.com</a>, and{' '}
<a href="mailto:contact@example.com">contact@example.com</a>.
</p>
<h2>Footnote</h2>
<p>
A note
<sup>
<a
href="#user-content-fn-1"
id="user-content-fnref-1"
data-footnote-ref="true"
aria-describedby="footnote-label"
>
1
</a>
</sup>
</p>
<h2>Strikethrough</h2>
<p>
<del>one</del> or <del>two</del> tildes.
</p>
<h2>Table</h2>
<table>
<thead>
<tr>
<th>a</th>
<th style={{textAlign: 'left'}}>b</th>
<th style={{textAlign: 'right'}}>c</th>
<th style={{textAlign: 'center'}}>d</th>
</tr>
</thead>
</table>
<h2>Tasklist</h2>
<ul className="contains-task-list">
<li className="task-list-item">
<input type="checkbox" disabled /> to do
</li>
<li className="task-list-item">
<input type="checkbox" disabled checked />
done
</li>
</ul>
<section data-footnotes="true" className="footnotes">
<h2 className="sr-only" id="footnote-label">
Footnotes
</h2>
<ol>
<li id="user-content-fn-1">
<p>
Big note.{' '}
<a
href="#user-content-fnref-1"
data-footnote-backref=""
aria-label="Back to reference 1"
className="data-footnote-backref"
>
↩
</a>
</p>
</li>
</ol>
</section>
</>