A Vue.js component to parse and render markdown text into native components on Weex platform.
content
: markdown text content.theme
: mardown style theme.
You can write markdown text inside it directly.
<markdown>
# This is a Big Title
**something inside.**
by [Hanks](https://github.com/hanks10100).
</markdown>
Notice: The indent will break the markdown syntax rules.
<div>
<markdown>
# Invalid Title
*Emphasis* stil **works**.
</markdown>
</div>
<markdown content="This _text_ *will be __rendered__ too*.">
You can also binding the content with a javascript variable:
<markdown v-bind:content="article">
The article
may defined like this:
new Vue({
data () {
return {
article: '# Title\n\nFirst paragraph.'
}
}
})
If passed theme
property, the new styles will override the default theme.
new Vue({
template: `
<markdown :theme="newTheme"></markdown>
`,
data () {
return {
newTheme: {
h1: {
color: '#FF6600',
fontWeight: 'bold'
}
}
}
}
})
See src/markdown.js.
# H1
## H2
### H3
#### H4
##### H5
###### H6
- Emphasis: use
*asterisks*
or_underscores_
. - Strong emphasis: use two
**asterisks**
or__underscores__
. Strikethrough: uses two~~tildes~~
.codespan
: useback-ticks
around.
[link name](http://whatever.link.address)
Not support reference links and relative paths.
![image alt](http://image.address/whatever.png)
Not support reference image sources and relative paths.
In Weex, images must set width
and height
, otherwise it will not render.
The size of the image can be declared in {}
within image alt:
![image alt {750x640}](http://image.address/whatever.png)
{500x400}
means width is 500px and height is 400px.{480x}
means both width and height are 480px.{640}
is invalid.
Use
>
before blockquote texts.
> Use `>` before blockquote texts.
- Lists
- Code blocks
- Tables
- Inline HTML