在写一个markdown简历生成器的时候，需要用到star以及icons，这时就需要写一个简单的插件来生成评级。

用法:

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

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中需要这样写,等等

我们所要做的便是:

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