https://github.com/startpolymer/s-markdown
Fast modular regex-based Markdown parser.
https://github.com/startpolymer/s-markdown
Last synced: about 1 year ago
JSON representation
Fast modular regex-based Markdown parser.
- Host: GitHub
- URL: https://github.com/startpolymer/s-markdown
- Owner: StartPolymer
- Created: 2016-09-24T08:42:43.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-24T14:42:51.000Z (almost 9 years ago)
- Last Synced: 2025-04-11T18:24:23.141Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 2.39 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
## <s-markdown>
Fast modular regex-based Markdown parser.
Inspired by [<marked-element>](https://github.com/PolymerElements/marked-element) and [Slimdown](https://gist.github.com/jbroadway/2836900).
`` accepts Markdown source, and renders it to a child
element with the class `markdown-html`. This child element can be styled
as you would a normal DOM element. If you do not provide a child element
with the `markdown-html` class, the Markdown source will still be rendered,
but to a shadow DOM child that cannot be styled.
The Markdown source can be specified either via the `markdown` attribute:
```html
```
Or, you can provide it via a `` element child:
```html
<s-markdown rules="a blockquote code del em-strong h hr img ol q ul p">
<div class="markdown-html"></div>
<script type="text/markdown">
## This is an h2 tag
### This is an h3 tag
---
`var inlineCode = 0;`
*italic text* | _italic text_
**bold text** | __bold text__
***italic bold text*** | ___italic bold text___
~~Scratch this.~~
:"Quote text":
> blockquote
- item 1
- item 2
- item 3
1. item 1
2. item 2
3. item 3
[Link](https://www.polymer-project.org)
<img src="http://example.com/test_skipping_em_rule_for_line_contain_html_tag.html">
```
Note that the `` approach is *static*. Changes to
the script content will *not* update the rendered markdown!
### Styling
If you are using a child with the `markdown-html` class, you can style it
as you would a regular DOM element:
```css
.markdown-html p {
color: red;
}
.markdown-html td:first-child {
padding-left: 24px;
}
```
## License
MIT: [StartPolymer/license](https://github.com/StartPolymer/license)