hexo-tag-admonition - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

admonition-test.md

		@@ -8,3 +8,3 @@ ---

		Python markdown实现中扩展了markdown的语法，让其支持了[admonition][]。标准markdown语法是不支持的，在hexo中我们可以安装[hexo-tag-admonition][]这个插件来用tag实现admonition。
		Python markdown实现中扩展了markdown的语法，让其支持了[admonition][]。标准markdown语法是不支持的，在hexo中我们可以通过安装[hexo-tag-admonition][]这个插件来用tag实现admonition。

		@@ -17,18 +17,20 @@ 在hexo site目录中，安装admonition插件:

		使用的时候，在markdown文件这样写:
		使用的时候，在markdown文件中这样写:

		```
		{% admonition danger Don't do this %}
		Hello this is just a test
		Hello this is just a test.
		This is an another line.
		{% endadmonition %}
		```


		然后你看到的就是下面的结果:

		{% admonition danger Don't do this %}
		Hello this is just a test
		Hello this is just a test.
		This is an another line.
		{% endadmonition %}


		`admonition`是tag的名字，`danger`会是最后身成的html相关tag的class。这个地方你可以填成"note", "info", "tips", "warning", "important", "danger", "critical"，当然也可以是其他值，只要你所用的主题对这些class指定了样式就可以。
		`admonition`是tag名，`danger`会是最后生成的html中用于style的class。这个地方你可以填成"note", "info", "tips", "warning", "important", "danger", "critical"，当然也可以是其他值，只要你所用的主题对这些class指定了样式就可以。

		@@ -112,1 +114,2 @@ 下面是一些例子:
		[admonition]: https://pythonhosted.org/Markdown/extensions/admonition.html
		[hexo-tag-admonition]: https://github.com/haishanh/hexo-tag-admonition

index.js

		@@ -0,1 +1,2 @@
		/** not used after using hexo render
		function escape(html, encode) {
		@@ -9,2 +10,3 @@ return html
		}
		*/

		@@ -18,9 +20,9 @@ hexo.extend.tag.register('admonition', function(args, content) {
		content.split('\n').forEach(function(line) {
		lines += '<p>' + escape(line, true) + '</p>';
		lines += hexo.render.renderSync({text: line, engine: 'markdown'});
		});
		}

		return '<div class="admonition ' + cls +
		'"><p class="admonition-title">' +
		title + '</p>' + lines + '</div>';
		return '<div class="admonition ' + cls +
		'"><p class="admonition-title">' +
		title + '</p>' + lines + '</div>';
		}, {
		@@ -27,0 +29,0 @@ async: true,

package.json

		{
		"name": "hexo-tag-admonition",
		"version": "1.0.0",
		"version": "1.1.0",
		"description": "Tag plugin for hexo to support admonition",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		This is a tag plugin for hexo to support admonition.

		## Basic usage

		Ofcourse, install the plugin first:

		```
		npm install --save hexo-tag-admonition
		```

		Then in your markdown file:

		```
		{% admonition danger Don't do this %}
		Hello this is just a test.
		This is an another line.
		{% endadmonition %}
		```

		will turn into something like this:

		```html
		<div class="admonition danger">
		<p class="admonition-title">Don't do this</p>
		<p>Hello this is just a test.</p>
		<p>This is an another line.</p>
		</div>
		```

		Note: there is no space or newline charater between tags in real implementation.

		## What does this mean

		`{% admonition danger Don't do this %}` is the open tag. Here admonition is the tag name, danger will be class name being added to the admonition `<div>`, Don't do this will be the title of the admonition.

		`{% endadmonition %}` is the close tag. It can't be omitted.

		Lines between the open and close tag are the contents, contents will be put in admonition `<div>`, each line wrapped in a single `<p>`.

		## Styling

		Then you can style it with proper css rules. Here is a [example][zxcvb-admonition] using sass.

		It is recommended to use at least 3 levels of admonition, for example: note, warning and danger. Each with it's own style.

		Also, I think it's good practice to also styling similiar keywords. For example in CSS:

		```
		.info, .note {
		color: blue;
		}

		.warning, .important {
		color: orange;
		}

		.danger, .critical {
		color: red;
		}
		```

		Have a look at this [codepen][codepen].

		## License

		MIT

		[zxcvb-admonition]: https://github.com/haishanh/hexo-theme-zxcvb/blob/master/source/_scss/_admonition.scss
		[codepen]: http://codepen.io/haishanh/pen/zqqbmq/?editors=1100

hexo-tag-admonition - npm Package Compare versions

Improved metrics