Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MarketingPipeline/Markdown-Tag
Render Markdown to HTML on any website using a md tag
https://github.com/MarketingPipeline/Markdown-Tag
commonmark custom-element frontend gfm github github-flavored-markdown github-markdown html html-converter javascript markdown markdown-converter markdown-flavors markdown-parser markdown-tag markdown-to-html md showdown web-component web-components
Last synced: 3 months ago
JSON representation
Render Markdown to HTML on any website using a md tag
- Host: GitHub
- URL: https://github.com/MarketingPipeline/Markdown-Tag
- Owner: MarketingPipeline
- License: gpl-3.0
- Created: 2022-05-19T09:14:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-09T19:41:26.000Z (about 2 years ago)
- Last Synced: 2024-07-31T09:34:06.411Z (6 months ago)
- Topics: commonmark, custom-element, frontend, gfm, github, github-flavored-markdown, github-markdown, html, html-converter, javascript, markdown, markdown-converter, markdown-flavors, markdown-parser, markdown-tag, markdown-to-html, md, showdown, web-component, web-components
- Language: CSS
- Homepage:
- Size: 258 KB
- Stars: 405
- Watchers: 5
- Forks: 20
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Markdown-Tag
The easiest way to add Markdown support to your website!
Show your support!
## Example and usage
You can view a demo of Markdown Tag in use [here.](https://marketingpipeline.github.io/Markdown-Tag)
How to use Markdown Tag:
Add support to any website to use markdown ANYWHERE with a simple tag! Like so -
# Markdown Support
Awesomeness
include this [script](https://github.com/MarketingPipeline/Markdown-Tag/blob/main/markdown-tag.js) at the bottom of your HTML document.
How to use Markdown Tag with GitHub Styling:
Instead of using a <md> tag use
# Example
How to render new text or a new Markdown Tag added to HTML:
Call this function using a onclick etc..
```
renderMarkdown();
```## Syntax
This script uses Showdown to render Markdown - to read about the Showdown's Markdown syntax style click [here](https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax)
How to use CommonMark Syntax:
If you wish to use [CommonMark](https://spec.commonmark.org/current/) syntax instead of Showdown's use this [script](https://github.com/MarketingPipeline/Markdown-Tag/blob/main/markdown-tag-commonmark.js) instead of the one above at the bottom of your HTML document.
How to use GitHub Flavored Markdown Syntax:
If you wish to use [GitHub Flavored Markdown Spec](https://github.github.com/gfm/) syntax use this [script](https://github.com/MarketingPipeline/Markdown-Tag/blob/main/markdown-tag-Github.js) instead of the other script's above at the bottom of your HTML document.
Note: This options includes - Tables, GitHub Mentions & More.## Syntax Highlighting
> Note: to use Syntax Hightlighting - you must use the GitHub flavored version of Markdown Tag.
By **default** using a
<github-md>
will automatically add a CSS stylesheet for GitHub like syntax hightlighting colors.To use Syntax Highlighting with a
<md>
tag, you will need to apply a CSS stylesheet. You can find a list of Syntax Hightlighting Stylesheets that work with Markdown Tag [here](https://github.com/PrismJS/prism-themes)## Handling untrusted content
By default Markdown-Tag does not santize the Markdown you provide, since in most use cases the content is trusted.
Any other content provided from user's on your website etc. Should be santized before adding it inside a
<md>
or<github-md>
tag to prevent XSS.## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/Markdown-Tag)
Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!
Looking for a task to work on? Check the tasks that need improved in the [to-do](https://github.com/MarketingPipeline/Markdown-Tag/blob/main/.github/U.md) list.
See also the list of
[contributors](https://github.com/MarketingPipeline/Markdown-Tag/graphs/contributors) who
participate in this project.## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/markdown-tag)
This project is licensed under the GPL-3.0 License - see the
[LICENSE.md](https://github.com/MarketingPipeline/Markdown-Tag/blob/main/LICENSE) file for
details.