|
1 |
| -![remark][logo] |
2 |
| - |
3 | 1 | # Getting started
|
4 | 2 |
|
5 |
| -**remark** transforms markdown. |
6 |
| -It’s an ecosystem of [plugins][]. |
7 |
| -If you get stuck, [issues][] and [Discussions][] are good places to get help. |
8 |
| - |
9 |
| -It’s built on [unified][], make sure to read it and its [website][] too. |
10 |
| - |
11 |
| -## Contents |
12 |
| - |
13 |
| -* [Intro](#intro) |
14 |
| -* [Command line](#command-line) |
15 |
| -* [Using remark in a project](#using-remark-in-a-project) |
16 |
| -* [Programmatic usage](#programmatic-usage) |
17 |
| - |
18 |
| -## Intro |
19 |
| - |
20 |
| -Out of the box, **remark** transforms markdown: markdown is given, reformatted, |
21 |
| -and written: |
22 |
| - |
23 |
| -```md |
24 |
| -# Alpha # |
25 |
| -Bravo charlie **delta** __echo__. |
26 |
| -- Foxtrot |
27 |
| -``` |
28 |
| - |
29 |
| -Yields: |
30 |
| - |
31 |
| -```md |
32 |
| -# Alpha |
33 |
| - |
34 |
| -Bravo charlie **delta** **echo**. |
35 |
| - |
36 |
| -* Foxtrot |
37 |
| -``` |
38 |
| - |
39 |
| -But, much more can be done, [through plugins][plugins]. |
40 |
| - |
41 |
| -## Command line |
42 |
| - |
43 |
| -**remark**’s CLI is a simple way to process markdown files from the |
44 |
| -command line. Its interface is provided by [**unified-args**][unified-args]. |
45 |
| - |
46 |
| -Install [`remark-cli`][cli] and dependencies (in this case a [linting |
47 |
| -preset][preset] and [`remark-html`][html]) with [npm][]: |
48 |
| - |
49 |
| -```sh |
50 |
| -npm install --global remark-cli remark-html remark-preset-lint-markdown-style-guide |
51 |
| -``` |
52 |
| - |
53 |
| -`readme.md` contains: |
54 |
| - |
55 |
| -```md |
56 |
| -_Hello_. |
57 |
| -``` |
58 |
| - |
59 |
| -Now, to process `readme.md`, run the following: |
60 |
| - |
61 |
| -```sh |
62 |
| -remark readme.md --use html --use preset-lint-markdown-style-guide |
63 |
| -``` |
64 |
| - |
65 |
| -Yields: |
66 |
| - |
67 |
| -```txt |
68 |
| -<p><em>Hello</em>.</p> |
69 |
| -readme.md.md |
70 |
| - 1:1-1:8 warning Emphasis should use `*` as a marker emphasis-marker remark-lint |
71 |
| -
|
72 |
| -⚠ 1 warning |
73 |
| -``` |
74 |
| - |
75 |
| -## Using remark in a project |
76 |
| - |
77 |
| -In the previous example, `remark-cli` was installed globally. |
78 |
| -That’s generally a bad idea. |
79 |
| -Here we’re going to use the CLI to lint an npm package. |
80 |
| - |
81 |
| -Say we have the following `package.json`: |
82 |
| - |
83 |
| -```json |
84 |
| -{ |
85 |
| - "name": "my-package", |
86 |
| - "version": "1.0.0", |
87 |
| - "type": "module", |
88 |
| - "scripts": { |
89 |
| - "test": "node test.js" |
90 |
| - } |
91 |
| -} |
92 |
| -``` |
93 |
| - |
94 |
| -And install `remark-cli`, `remark-html`, and |
95 |
| -`remark-preset-lint-markdown-style-guide` into it as a dev-dependencies: |
96 |
| - |
97 |
| -```sh |
98 |
| -npm install --save-dev remark-cli remark-html remark-preset-lint-markdown-style-guide |
99 |
| -``` |
100 |
| - |
101 |
| -The `--save-dev` option stores the dependencies in our `package.json`: |
102 |
| - |
103 |
| -```diff |
104 |
| - { |
105 |
| - "name": "my-package", |
106 |
| - "version": "1.0.0", |
107 |
| - "type": "module", |
108 |
| -+ "devDependencies": { |
109 |
| -+ "remark-cli": "^10.0.0", |
110 |
| -+ "remark-html": "^14.0.0", |
111 |
| -+ "remark-preset-lint-markdown-style-guide": "^5.0.0" |
112 |
| -+ }, |
113 |
| - "scripts": { |
114 |
| - "test": "node test.js" |
115 |
| - } |
116 |
| - } |
117 |
| -``` |
118 |
| - |
119 |
| -Then, we change our `test` script to include remark, and add |
120 |
| -configuration: |
121 |
| - |
122 |
| -```diff |
123 |
| - { |
124 |
| - "name": "my-package", |
125 |
| - "version": "1.0.0", |
126 |
| - "type": "module", |
127 |
| - "devDependencies": { |
128 |
| - "remark-cli": "^10.0.0", |
129 |
| - "remark-html": "^14.0.0", |
130 |
| - "remark-preset-lint-markdown-style-guide": "^5.0.0" |
131 |
| - }, |
132 |
| - "scripts": { |
133 |
| -- "test": "node test.js" |
134 |
| -+ "test": "remark . --quiet --frail && node test.js" |
135 |
| -+ }, |
136 |
| -+ "remarkConfig": { |
137 |
| -+ "plugins": [ |
138 |
| -+ "preset-lint-markdown-style-guide", |
139 |
| -+ "html" |
140 |
| -+ ] |
141 |
| - } |
142 |
| - } |
143 |
| -``` |
144 |
| - |
145 |
| -Now from the command line we can run: |
146 |
| - |
147 |
| -```sh |
148 |
| -npm test |
149 |
| -``` |
150 |
| - |
151 |
| -This will lint all markdown files when we test the project. |
152 |
| -[`--frail`][frail] ensures the command fails if a code-style violation |
153 |
| -is found, and [`--quiet`][quiet] hides successful files from the report. |
154 |
| - |
155 |
| -## Programmatic usage |
156 |
| - |
157 |
| -The programmatic interface of **remark** is provided by |
158 |
| -[**unified**][unified]. |
159 |
| -In fact, [`remark`][api] is two plugins: [`remark-parse`][parse] and |
160 |
| -[`remark-stringify`][stringify]. |
161 |
| - |
162 |
| -Install [`remark`][api] and dependencies with [npm][]: |
163 |
| - |
164 |
| -```sh |
165 |
| -npm install vfile-reporter remark remark-html remark-preset-lint-markdown-style-guide |
166 |
| -``` |
167 |
| - |
168 |
| -`index.js` contains: |
169 |
| - |
170 |
| -```js |
171 |
| -import {reporter} from 'vfile-reporter' |
172 |
| -import {remark} from 'remark' |
173 |
| -import remarkPresetLintMarkdownStyleGuide from 'remark-preset-lint-markdown-style-guide' |
174 |
| -import remarkHtml from 'remark-html' |
175 |
| - |
176 |
| -remark() |
177 |
| - .use(remarkPresetLintMarkdownStyleGuide) |
178 |
| - .use(remarkHtml) |
179 |
| - .process('_Hello_.') |
180 |
| - .then((file) => { |
181 |
| - console.error(reporter(file)) |
182 |
| - console.log(String(file)) |
183 |
| - }) |
184 |
| -``` |
185 |
| - |
186 |
| -`node index.js` yields: |
187 |
| - |
188 |
| -```txt |
189 |
| - 1:1-1:8 warning Emphasis should use `*` as a marker emphasis-marker remark-lint |
190 |
| -
|
191 |
| -⚠ 1 warning |
192 |
| -<p><em>Hello</em>.</p> |
193 |
| -``` |
194 |
| - |
195 |
| -<!-- Definitions --> |
196 |
| - |
197 |
| -[logo]: https://raw.githubusercontent.com/remarkjs/remark/1f338e72/logo.svg?sanitize=true |
198 |
| - |
199 |
| -[issues]: https://github.com/remarkjs/remark/issues |
200 |
| - |
201 |
| -[discussions]: https://github.com/remarkjs/remark/discussions |
202 |
| - |
203 |
| -[npm]: https://docs.npmjs.com/cli/install |
204 |
| - |
205 |
| -[api]: https://github.com/remarkjs/remark/tree/main/packages/remark |
206 |
| - |
207 |
| -[cli]: https://github.com/remarkjs/remark/tree/main/packages/remark-cli |
208 |
| - |
209 |
| -[plugins]: https://github.com/remarkjs/remark/tree/main/doc/plugins.md |
210 |
| - |
211 |
| -[unified]: https://github.com/unifiedjs/unified |
212 |
| - |
213 |
| -[website]: https://unifiedjs.com |
214 |
| - |
215 |
| -[unified-args]: https://github.com/unifiedjs/unified-args |
216 |
| - |
217 |
| -[frail]: https://github.com/unifiedjs/unified-args#--frail |
218 |
| - |
219 |
| -[quiet]: https://github.com/unifiedjs/unified-args#--quiet |
220 |
| - |
221 |
| -[parse]: https://github.com/remarkjs/remark/tree/main/packages/remark-parse |
222 |
| - |
223 |
| -[stringify]: https://github.com/remarkjs/remark/tree/main/packages/remark-stringify |
224 |
| - |
225 |
| -[preset]: https://github.com/remarkjs/remark-lint/tree/HEAD/packages/remark-preset-lint-markdown-style-guide |
| 3 | +See [the monorepo readme][remark] for what the remark ecosystem is and examples |
| 4 | +of how to get started. |
226 | 5 |
|
227 |
| -[html]: https://github.com/remarkjs/remark-html |
| 6 | +[remark]: https://github.com/remarkjs/remark |
0 commit comments