Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add improved docs #900

Merged
merged 36 commits into from
Nov 18, 2021
Merged
Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
4f68cff
Add improved docs
wooorm Nov 14, 2021
d784867
Remove contents from `getting-started.md`
wooorm Nov 15, 2021
433e27e
doc/plugins.md
wooorm Nov 15, 2021
cc32bee
Update packages/remark/readme.md
wooorm Nov 15, 2021
1246d34
Fix typo
wooorm Nov 15, 2021
211481f
Improve link
wooorm Nov 15, 2021
af88e39
Reword
wooorm Nov 15, 2021
802462c
Reword some more
wooorm Nov 15, 2021
f8bba89
some more
wooorm Nov 15, 2021
91f9a13
Refactor
wooorm Nov 15, 2021
1e4974b
Add examples to `remark`
wooorm Nov 15, 2021
3556138
Add example of config files
wooorm Nov 15, 2021
587efb0
Remove superfluous phrase
wooorm Nov 15, 2021
4c96b75
Format tip
wooorm Nov 15, 2021
a1cbda0
Format note
wooorm Nov 15, 2021
f7c80f0
Reword
wooorm Nov 15, 2021
9efbd9d
Consistent casing
wooorm Nov 15, 2021
4100319
Reword
wooorm Nov 15, 2021
7274e34
Fix comments
wooorm Nov 15, 2021
960781f
Reword
wooorm Nov 15, 2021
ee8ddcc
Try out different notes
wooorm Nov 15, 2021
55ff056
Take two
wooorm Nov 15, 2021
7d761e0
Update packages/remark-cli/readme.md
wooorm Nov 16, 2021
895582f
backport
wooorm Nov 16, 2021
09cad33
Update descriptions in `package.json`s
wooorm Nov 16, 2021
767b3ea
tests
wooorm Nov 16, 2021
3d13de5
Reword
wooorm Nov 16, 2021
9a721ec
micromark
wooorm Nov 16, 2021
07ecfb7
Add note on submitting security report
wooorm Nov 16, 2021
c8ca1b7
lowlight some things
wooorm Nov 16, 2021
2e3225a
Remove unneeded alternative
wooorm Nov 16, 2021
8d9046b
Merge branch 'main' into docs
wooorm Nov 16, 2021
a1084b5
Mention `remark-mdx`, because mdx is also a good reason to choose rem…
wooorm Nov 17, 2021
5969b6f
Update readme.md
wooorm Nov 18, 2021
c9b2ad6
Add note on adding to the list of plugins
wooorm Nov 18, 2021
beb9da8
package.json
wooorm Nov 18, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 3 additions & 224 deletions doc/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,227 +1,6 @@
![remark][logo]

# Getting started

**remark** transforms markdown.
It’s an ecosystem of [plugins][].
If you get stuck, [issues][] and [Discussions][] are good places to get help.

It’s built on [unified][], make sure to read it and its [website][] too.

## Contents

* [Intro](#intro)
* [Command line](#command-line)
* [Using remark in a project](#using-remark-in-a-project)
* [Programmatic usage](#programmatic-usage)

## Intro

Out of the box, **remark** transforms markdown: markdown is given, reformatted,
and written:

```md
# Alpha #
Bravo charlie **delta** __echo__.
- Foxtrot
```

Yields:

```md
# Alpha

Bravo charlie **delta** **echo**.

* Foxtrot
```

But, much more can be done, [through plugins][plugins].

## Command line

**remark**’s CLI is a simple way to process markdown files from the
command line. Its interface is provided by [**unified-args**][unified-args].

Install [`remark-cli`][cli] and dependencies (in this case a [linting
preset][preset] and [`remark-html`][html]) with [npm][]:

```sh
npm install --global remark-cli remark-html remark-preset-lint-markdown-style-guide
```

`readme.md` contains:

```md
_Hello_.
```

Now, to process `readme.md`, run the following:

```sh
remark readme.md --use html --use preset-lint-markdown-style-guide
```

Yields:

```txt
<p><em>Hello</em>.</p>
readme.md.md
1:1-1:8 warning Emphasis should use `*` as a marker emphasis-marker remark-lint

⚠ 1 warning
```

## Using remark in a project

In the previous example, `remark-cli` was installed globally.
That’s generally a bad idea.
Here we’re going to use the CLI to lint an npm package.

Say we have the following `package.json`:

```json
{
"name": "my-package",
"version": "1.0.0",
"type": "module",
"scripts": {
"test": "node test.js"
}
}
```

And install `remark-cli`, `remark-html`, and
`remark-preset-lint-markdown-style-guide` into it as a dev-dependencies:

```sh
npm install --save-dev remark-cli remark-html remark-preset-lint-markdown-style-guide
```

The `--save-dev` option stores the dependencies in our `package.json`:

```diff
{
"name": "my-package",
"version": "1.0.0",
"type": "module",
+ "devDependencies": {
+ "remark-cli": "^10.0.0",
+ "remark-html": "^14.0.0",
+ "remark-preset-lint-markdown-style-guide": "^5.0.0"
+ },
"scripts": {
"test": "node test.js"
}
}
```

Then, we change our `test` script to include remark, and add
configuration:

```diff
{
"name": "my-package",
"version": "1.0.0",
"type": "module",
"devDependencies": {
"remark-cli": "^10.0.0",
"remark-html": "^14.0.0",
"remark-preset-lint-markdown-style-guide": "^5.0.0"
},
"scripts": {
- "test": "node test.js"
+ "test": "remark . --quiet --frail && node test.js"
+ },
+ "remarkConfig": {
+ "plugins": [
+ "preset-lint-markdown-style-guide",
+ "html"
+ ]
}
}
```

Now from the command line we can run:

```sh
npm test
```

This will lint all markdown files when we test the project.
[`--frail`][frail] ensures the command fails if a code-style violation
is found, and [`--quiet`][quiet] hides successful files from the report.

## Programmatic usage

The programmatic interface of **remark** is provided by
[**unified**][unified].
In fact, [`remark`][api] is two plugins: [`remark-parse`][parse] and
[`remark-stringify`][stringify].

Install [`remark`][api] and dependencies with [npm][]:

```sh
npm install vfile-reporter remark remark-html remark-preset-lint-markdown-style-guide
```

`index.js` contains:

```js
import {reporter} from 'vfile-reporter'
import {remark} from 'remark'
import remarkPresetLintMarkdownStyleGuide from 'remark-preset-lint-markdown-style-guide'
import remarkHtml from 'remark-html'

remark()
.use(remarkPresetLintMarkdownStyleGuide)
.use(remarkHtml)
.process('_Hello_.')
.then((file) => {
console.error(reporter(file))
console.log(String(file))
})
```

`node index.js` yields:

```txt
1:1-1:8 warning Emphasis should use `*` as a marker emphasis-marker remark-lint

⚠ 1 warning
<p><em>Hello</em>.</p>
```

<!-- Definitions -->

[logo]: https://raw.githubusercontent.com/remarkjs/remark/1f338e72/logo.svg?sanitize=true

[issues]: https://github.com/remarkjs/remark/issues

[discussions]: https://github.com/remarkjs/remark/discussions

[npm]: https://docs.npmjs.com/cli/install

[api]: https://github.com/remarkjs/remark/tree/main/packages/remark

[cli]: https://github.com/remarkjs/remark/tree/main/packages/remark-cli

[plugins]: https://github.com/remarkjs/remark/tree/main/doc/plugins.md

[unified]: https://github.com/unifiedjs/unified

[website]: https://unifiedjs.com

[unified-args]: https://github.com/unifiedjs/unified-args

[frail]: https://github.com/unifiedjs/unified-args#--frail

[quiet]: https://github.com/unifiedjs/unified-args#--quiet

[parse]: https://github.com/remarkjs/remark/tree/main/packages/remark-parse

[stringify]: https://github.com/remarkjs/remark/tree/main/packages/remark-stringify

[preset]: https://github.com/remarkjs/remark-lint/tree/HEAD/packages/remark-preset-lint-markdown-style-guide
See [the monorepo readme][remark] for what the remark ecosystem is and examples
of how to get started.

[html]: https://github.com/remarkjs/remark-html
[remark]: https://github.com/remarkjs/remark
Loading