Skip to content

Commit 87c50a5

Browse files
authoredNov 18, 2021
Add improved docs
Closes GH-900 Reviewed-by: Merlijn Vos <merlijn@soverin.net> Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com> Reviewed-by: Remco Haszing <remcohaszing@gmail.com> Reviewed-by: Morgan Craft <mgan59@gmail.com>
1 parent 941baa4 commit 87c50a5

File tree

12 files changed

+1527
-662
lines changed

12 files changed

+1527
-662
lines changed
 

‎doc/getting-started.md

+3-224
Original file line numberDiff line numberDiff line change
@@ -1,227 +1,6 @@
1-
![remark][logo]
2-
31
# Getting started
42

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.
2265

227-
[html]: https://github.com/remarkjs/remark-html
6+
[remark]: https://github.com/remarkjs/remark

0 commit comments

Comments
 (0)
Please sign in to comment.