Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2015-04-05T08:07:04.829997+00:00BlogBower 包发布2015-04-04T14:38:08+00:002015-04-04T14:48:22.245636+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/bower-package-publish-and-git-tag/一些时间没有用bower发布包,结果忘了如何去发布一个包,记个笔记方便以后使用。
##Bower 发布包
1.初始化
bower init
这个过程中会输入一些信息。我的包是: [https://github.com/phodal/showdown-fontawesome](https://github.com/phodal/showdown-fontawesome)
? name: showdown-fontawesome
? version: 0.0.1
? description: Showdown Font Awesome Plugin
? main file: src/icons.js
? what types of modules does this package expose? amd
? keywords: showdown,markdown,font-awesome
? authors: Fengda HUANG <h@phodal.com>
? license: MIT
? homepage: https://github.com/phodal/showdown-fontawesome
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
{
name: 'showdown-fontawesome',
version: '0.0.1',
homepage: 'https://github.com/phodal/showdown-fontawesome',
authors: [
'Fengda HUANG <h@phodal.com>'
],
description: 'Showdown Font Awesome Plugin',
main: 'src/icons.js',
moduleType: [
'amd'
],
keywords: [
'showdown',
'markdown',
'font-awesome'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'app/bower_components',
'test',
'tests'
]
}
? Looks good? Yes
2.注册包
bower register showdown-fontawesome git@github.com:phodal/showdown-fontawesome.git
3.修改bower.json中的版本
4.打tag,如
git tag v0.0.1
5.push tag
push一个tag
git push origin v0.0.1
push本地tags
git push --tags
列出所有tag的状态
git tag -l
6.查看包状态
bower info showdown-fontawesome
</h@phodal.com></h@phodal.com>Showdown 添加Star插件2015-04-04T08:32:02+00:002015-04-05T08:07:04.829997+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/markdown-add-star-plugin-with-showdown/在写一个markdown简历生成器的时候,需要用到star以及icons,这时就需要写一个简单的插件来生成评级。
![Showdown star plugin](/static/media/uploads/star.jpg)
用法:
var converter = new Showdown.converter({ extensions: ['star'] });
var result = converter.makeHtml('<level1> <br/> <level1.5> <br/> <level3> <br/> <level3.5>');
document.getElementById('show').innerHTML = result;
代码实现: [https://github.com/phodal/showdown-star](https://github.com/phodal/showdown-star)
##Showdown
> Showdown.js是一个javascript环境下markdown语法解释工具. 支持nodejs和各大主流浏览器.
官方给了几个插件的示例
var demo = function(converter) {
return [
// Replace escaped @ symbols
{ type: 'lang', filter: function(text) {
return text.replace(/\\@/g, '@');
}}
];
}
以及
var demo = function(converter) {
return [
// Replace escaped @ symbols
{ type: 'lang', regex: '\\@', replace: '@' }
];
}
这时看了看Showdown自带的几个插件发现还是挺简单的。
##Showdown Prettify 插件分析
源码如下所示
var prettify = function(converter) {
return [
{ type: 'output', filter: function(source){
return source.replace(/(<pre>)?<code>/gi, function(match, pre) {
if (pre) {
return '<pre class="prettyprint linenums" tabindex="0"><code data-inner="1">';
} else {
return '<code class="prettyprint">';
}
});
}}
];
};
看了一下原理就是用正则表达式去将``<pre>``替换成``<pre class="prettyprint linenums" tabindex="0"><code data-inner="1">``
##Showdown Star Plugin
于是,定义了下我们需要的星星类型:
1,1.5,2,2.5,3,3.5,4,4.5,5 一共有九种。
而在markdown中需要这样写<level1>,<level1.5>等等
我们所要做的便是:
1.用正则表达式匹配符合条件的level
2.将表达式中的``.``换为``-``
3.返回html
对应于代码便是:
var star = function(converter) {
return [
{ type: 'output', filter: function(source){
return source.replace(/(<level([0-9]*\.?[0-9]+)>)/gi, function(match, isLevel) {
var level = match.match(/<level([0-9]*\.?[0-9]+)>/i)[1];
level = level.replace(".", "-");
if (isLevel) {
return '<i class="star-icon icon-star star-' + level + '"></i>';
}
});
}}
];
};
除此我们还需要一堆CSS:
.star-icon {
background: url(../images/star.png) no-repeat;
background-size: 410% 100%;
-webkit-background-size: 410% 100%;
}
.icon-star {
display: inline-block;
width: 96px;
height: 18px;
}
.star-1 {
background-position: -76px 0;
}
.star-1-5 {
background-position: -260px 0;
}
.star-2 {
background-position: -57px 0;
}
.star-2-5 {
background-position: -241px 0;
}
.star-3 {
background-position: -38px 0;
}
.star-3-5 {
background-position: -222px 0;
}
.star-4 {
background-position: -19px 0;
}
.star-4-5 {
background-position: -203px 0;
}
.star-5 {
background-position: 0 0px;
}
用来定义不同的star,再绑定到Showdown中
window.Showdown.extensions.star = star;
便可以将之作为Showdown的plugin。
##其他
代码: [https://github.com/phodal/showdown-star](https://github.com/phodal/showdown-star)
</level([0-9]*\.?[0-9]+)></level([0-9]*\.?[0-9]+)></level1.5></level1></code></pre></pre></code></code></pre></code></pre></level3.5></level3></level1.5></level1>