Skip to content

Commit 1821119

Browse files
committed
Fix: Update readme
1 parent f814594 commit 1821119

File tree

2 files changed

+65
-8
lines changed

2 files changed

+65
-8
lines changed

README.md

Lines changed: 64 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
# `epic-remark`
2-
3-
**Warning**: This package is still in development. It is not yet ready for production use.
4-
52
`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.
63

74
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
2017
- `remark-rehype`: `^11.0.0`
2118
- `rehype-raw`: `^7.0.0`
2219

23-
## How does it work
20+
## How it works
2421
`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).
2522

2623
`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.
2724

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+
const markdown = `# Your Markdown Here`;
46+
const html = 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+
const markdown = `# Your Markdown Here`;
66+
67+
const options = {
68+
addHeadingIds: true,
69+
wrapConfig: { img: 'custom-img-class' },
70+
addTableOfContents: true,
71+
calculateReadingTime: true,
72+
wordsPerMinute: 200,
73+
renderEmbeds: true
74+
};
75+
76+
const html = processMarkdown(markdown, options);
77+
```
78+
79+
See the [documentation](DOCUMENTATION.md) for more details on each option.
80+
2881
# Plugins
2982

3083
## `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.
3285

3386
## `addHeadingIds`
3487
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
4396
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.
4497

4598
## `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+
```
47104

48105
### Notes
49106
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.
50107

51108
## 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.
53110

54111
## License
55112
`epic-remark` uses the MIT license. See [license.md](LICENSE.md) for more details.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "epic-remark",
3-
"version": "0.2.2",
3+
"version": "1.0.0",
44
"description": "Epic Remark is an all-in-one markdown to HTML processor built on top of remark",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.esm.js",

0 commit comments

Comments
 (0)