Blog

Blog

PHODAL

Showdown 添加Star插件

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

Showdown star plugin

用法:

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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签