Weex Markdown Component
A Vue.js component to parse and render markdown text into native components on Weex platform.
Properties
content
: markdown text content.theme
: mardown style theme.
Usage
Raw text content
You can write markdown text inside it directly.
# This is a Big Title **something inside.** by [Hanks](https://github.com/hanks10100).
Notice: The indent will break the markdown syntax rules.
# Invalid Title *Emphasis* stil **works**.
content
property
Use
You can also binding the content with a javascript variable:
The article
may defined like this:
{ return article: '# Title\n\nFirst paragraph.' }
Custom styles
If passed theme
property, the new styles will override the default theme.
template: ` <markdown :theme="newTheme"></markdown> ` { return newTheme: h1: color: '#FF6600' fontWeight: 'bold' }
Default Theme
See src/markdown.js.
Syntax Cheetsheet
Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6
Inline Text
- Emphasis: use
*asterisks*
or_underscores_
. - Strong emphasis: use two
**asterisks**
or__underscores__
. Strikethrough: uses two~~tildes~~
.codespan
: useback-ticks
around.
Links
[link name](http://whatever.link.address)
Not support reference links and relative paths.
Images
![image alt](http://image.address/whatever.png)
Not support reference image sources and relative paths.
Image size
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.
Blockquotes
Use
>
before blockquote texts.
> Use `>` before blockquote texts.
Unsupported Syntax
- Lists
- Code blocks
- Tables
- Inline HTML