You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+64-7Lines changed: 64 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,4 @@
1
1
# `epic-remark`
2
-
3
-
**Warning**: This package is still in development. It is not yet ready for production use.
4
-
5
2
`epic-remark` is a Markdown to HTML processor built on top of `remark`. It adds GitHub-flavoured markdown capabilities, alongside some handy must-have custom plugins.
6
3
7
4
Use the all-in-one `processMarkdown` function to format your markdown into HTML, or import the custom plugins working behind the scenes one-by-one to mix your own flavour of Markdown HTML.
@@ -20,15 +17,71 @@ All supported frameworks are available in the `examples/` directory. You can sti
20
17
-`remark-rehype`: `^11.0.0`
21
18
-`rehype-raw`: `^7.0.0`
22
19
23
-
## How does it work
20
+
## How it works
24
21
`epic-remark` first uses `remark` and `remark-html` to convert your initial markdown to HTML. Then, `remark-gfm` is applied to enable the use of GitHub-flavoured markdown (tables, strikethrough, etc). At this point, the HTML is in a special `remark` AST (Abstract Syntax Tree). While it is possible to traverse and modify the tree, it can have some unexpected results. To create a more predictable environment, `epic-remark` uses `remark-rehype` to convert the `remark` AST to an easily adjustable HAST (HTML Abstract Syntax Tree).
25
22
26
23
`epic-remark` then runs any of the custom `epic-remark` plugins you've enabled, serializes the newly modified HAST using `rehype-stringify`, and returns the HTML content back to you, ready to display on your frontend.
27
24
25
+
## Getting started
26
+
### Installation
27
+
Install `epic-remark` using npm:
28
+
29
+
```bash
30
+
npm install epic-remark
31
+
```
32
+
33
+
or with yarn
34
+
35
+
```bash
36
+
yarn add epic-remark
37
+
```
38
+
39
+
### Usage
40
+
To use `epic-remark` in your project, you can import the `processMarkdown` function and use it to convert Markdown into HTML.
41
+
42
+
```javascript
43
+
import { processMarkdown } from'epic-remark';
44
+
45
+
constmarkdown=`# Your Markdown Here`;
46
+
consthtml=processMarkdown(markdown);
47
+
```
48
+
49
+
### Configuration
50
+
processMarkdown accepts an optional options object, which allows you to configure various aspects of the Markdown processing.
51
+
52
+
#### Basic Options
53
+
*`addHeadingIds`: `Boolean`. Automatically adds IDs to heading tags (h1 to h6). Defaults to false.
54
+
*`wrapConfig`: `Object`. Defines custom wrappers for specified HTML elements. Defaults to `{ img: 'epic-remark-image', table: 'epic-remark-table' }`.
55
+
*`addTableOfContents`: `Boolean`. Generates a table of contents based on headings. Defaults to false.
56
+
*`calculateReadingTime`: `Boolean`. Estimates the reading time of the content. Defaults to false.
57
+
*`wordsPerMinute`: `Number`. Defines the words-per-minute metric used to calculate reading time. Defaults to 250.
58
+
*`renderEmbeds`: `Boolean`. Embeds content from external sources like YouTube videos or GitHub gists. Defaults to false.
59
+
60
+
#### Example with Options
61
+
62
+
```javascript
63
+
import { processMarkdown } from'epic-remark';
64
+
65
+
constmarkdown=`# Your Markdown Here`;
66
+
67
+
constoptions= {
68
+
addHeadingIds:true,
69
+
wrapConfig: { img:'custom-img-class' },
70
+
addTableOfContents:true,
71
+
calculateReadingTime:true,
72
+
wordsPerMinute:200,
73
+
renderEmbeds:true
74
+
};
75
+
76
+
consthtml=processMarkdown(markdown, options);
77
+
```
78
+
79
+
See the [documentation](DOCUMENTATION.md) for more details on each option.
80
+
28
81
# Plugins
29
82
30
83
## `processMarkdown`
31
-
The processMarkdown function is the core of epic-remark. It converts markdown to HTML, applying a range of configurable options to enable additional plugins during execution. It is the primary function you'll use, with other plugins augmenting its capabilities.
84
+
The processMarkdown function is the core of` epic-remark`. It converts markdown to HTML, applying a range of configurable options to enable additional plugins during execution. It is the primary function you'll use, with other plugins augmenting its capabilities.
32
85
33
86
## `addHeadingIds`
34
87
Automatically adds an id attribute to all headings (h1 to h6). The id value mirrors the heading's text, transformed into a URL-friendly format. This plugin is ideal for creating anchor links and improving navigability within documents.
@@ -43,13 +96,17 @@ Generates a table of contents based on the document's headings. Users can config
43
96
Estimates the reading time of the provided markdown content. The calculation is based on a standard words-per-minute metric, which can be adjusted via options. The reading time is returned in minutes, offering a quick overview of the content length.
44
97
45
98
## `embed`
46
-
Embeds content from external sources, such as YouTube videos and GitHub gists with simple syntax like `!embed https://your-embed-url.com/`
99
+
Embeds content from external sources, such as YouTube videos and GitHub gists with simple syntax:
100
+
101
+
```markdown
102
+
!embed https://your-embed-url.com/
103
+
```
47
104
48
105
### Notes
49
106
Processed markdown always returns auto-linked URLs. This means that if you have a URL in your markdown, it will be converted to a clickable link.
50
107
51
108
## Contributing
52
-
Contributions are welcome! Please see the contributing docs for more details.
109
+
Contributions are welcome! Please see the [contributing guide](CONTRIBUTING.md) for more details.
53
110
54
111
## License
55
112
`epic-remark` uses the MIT license. See [license.md](LICENSE.md) for more details.
0 commit comments