https://github.com/acmenlei/markdown-plus

A Markdown parser developed in typescript.
https://github.com/acmenlei/markdown-plus

highlight line-number markdown markdown-parser markdown-plugin markdown-transformer typescript

Last synced: 3 months ago
JSON representation

A Markdown parser developed in typescript.

• Host: GitHub
• URL: https://github.com/acmenlei/markdown-plus
• Owner: acmenlei
• License: mit
• Created: 2022-09-24T14:48:06.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-07-06T02:53:39.000Z (4 months ago)
• Last Synced: 2024-07-06T04:20:37.221Z (4 months ago)
• Topics: highlight, line-number, markdown, markdown-parser, markdown-plugin, markdown-transformer, typescript
• Language: TypeScript
• Homepage: https://acmenlei.github.io/markdown-transform-html-demo/dist/
• Size: 6.54 MB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• project-awesome - acmenlei/markdown-plus - A Markdown parser developed in typescript. (TypeScript)

README

        


	
markdown-transform-html

	


	    

	        

	    

		

	        

	    

	

	
 



## Introduce

Markdown converter, convert Markdwon content to HTML format, and provide code line number display and code highlighting effect (currently support javascript, HTML and other languages, later will support C, C++, Java, JS, TS, Ruby, Rust, PHP, GO, ...).

[The online demo](https://acmenlei.github.io/markdown-transform-html-demo/dist/)

## Prompt

To make the style apply only to the part that needs to be parsed, be sure to add a 'markdown-transform-html' class declaration to the parsed container.

## Use

### install

```shell

pnpm install markdown-transform-html

```

or

```shell

npm install markdown-transform-html

```

or

```shell

yarn add markdown-transform-html

```

## Example

```ts

import { markdownToHTML } from "markdown-transform-html"

import  "markdown-transform-html/lib/styles/index.css";

const markdownContent = `#### level 4`;

const html = markdownToHTML(markdownContent);

(document.querySelector("#app") as Element).innerHTML = html;

```

## Highlighting

If you want to highlight code, then you need to introduce the following css styles and configure options, which is optional.

```ts

markdownToHTML(markdownContent, { highlight: true });

```

## MarkdownToHTML Options

Configure the markdownToHTML options

| property name        | type    | default value | meaning |

| -------------------- | ------- | ------------- | ------- |

| lineNumber      | Boolean  | false | If you need line numbers, turn this option on |

| highlight      | Boolean  | false          | If you need to highlight code in markdown, turn this option on |

| xss      | Boolean  | true          | To prevent users from xss attacks on your application, xss is used by default. If you want to turn it off, you can set it to false |

## Problems

Q: Why does highlighting fail after code changes?

A: After the content has been modified you should re-highlight the code using the `reHighlight` method

```js

// example

import { reHighlight } from "markdown-transform-html"

reHighlight();

```

## Sponsorship

If you think this project is helpful to you and circumstances permit, you can give me a little support. In short, thank you very much for your support ~





WeChat







Alipay







## License

MIT © [coderlei](./license)