使用code-printer生成一份炫酷的简历

个人我的网站：拓跋的前端客栈了解一哈，这里是原文地址，这里是项目地址，欢迎star&fork。若是您发现我文章中存在错误，请尽情向我吐槽，你们一块儿学习一块儿进步φ(>ω<*)

---

DEMO

---

最终效果请点击 这里 ，是否是有点意思？

源码分析

---

code-printer的最基本的原理是首先搭起一个骨架，而后经过遍历的方式，一点一点地往骨架里塞东西。

骨架主要有三块：

• <pre id="my-code">: 主要用来展现的HTML代码的，带标签
• <style id="style-elem">: 主要填CSS代码的，用于把<pre>里特定的标签转换成特定的样式
• <div id="script-area">: 主要是填JS代码的。可是因为一个字符一个字符往里面填代码会出现大量报错，所以这部分须要一个段落的JS代码所有书写完毕之后，经过一个命令符'~'来一次性填入。

printCodes

let printCodes = function (message, index, interval) {
    if (index < message.length) {
        $code_pre.scrollTop = $code_pre.scrollHeight;
        printChar(message[index++]);
        return setTimeout((function () {
            return printCodes(message, index, interval);
        }), speed);
    }
};
复制代码

这段代码的主要做用就是遍历打印字符，同时每次打印的时候都将滚动条拖到最底下，保证用户能看到最新的变化。

printChar

let printChar = function (which) {
    let char, formatted_code, prior_block_match, prior_comment_match, script_tag;
    if (which === "`") {
        // 重置为空字符串，防止打印出来
        which = "";
        isJs = !isJs;
    }
    if (isJs) {
        if (which === "~" && !openComment) {
            script_tag = createElement("script");
            // two matches based on prior scenario
            prior_comment_match = /(?:\*\/([^\~]*))$/;
            prior_block_match = /([^~]*)$/;
            if (unformatted_code.match(prior_comment_match)) {
                script_tag.innerHTML = unformatted_code.match(prior_comment_match)[0].replace("*/", "") + "\n\n";
            } else {
                script_tag.innerHTML = unformatted_code.match(prior_block_match)[0] + "\n\n";
            }
            $script_area.innerHTML = "";
            $script_area.appendChild(script_tag);
        }
        char = which;
        formatted_code = jsHighlight($code_pre.innerHTML, char);
    } else {
        char = which === "~" ? "" : which;
        $style_elem.innerHTML += char;
        formatted_code = cssHighlight($code_pre.innerHTML, char);
    }
    prevAsterisk = which === "*";
    prevSlash = (which === "/") && !openComment;
    openInteger = which.match(/[0-9]/) || (openInteger && which.match(/[\.\%pxems]/)) ? true : false;
    if (which === '"') {
        openString = !openString;
    }
    unformatted_code += which;
    return $code_pre.innerHTML = formatted_code;
};
复制代码

printChar函数是code-printer的核心函数，这个函数会根据当前的代码是JS仍是CSS，来进行不一样的处理。

如何判断是JS仍是CSS代码呢？默认设置

let isJs = false;
复制代码

也就是默认是CSS，而后以 ` 做为切换符号，每次遇到 ` 就切换一次语言。

当前字符属于JS时，在没遇到执行符号 ~ 以前，printChar只是单纯的打印格式化后的字符。遇到 ~ 之后，printChar进行了以下操做：

1. 函数首先经过正则匹配，匹配出以前的JS整段代码。
2. 再调用**createElement()**来创造一对<script></script>标签，用来存放JS代码。
3. 而后将处理过的JS代码存入<script></script>标签内。
4. 最后经过$script_area.appendChild()的方式将<script></script>及其内部的JS代码存入<div id="script-area">中。注意，每次调用**$script_area.appendChild()**以前，都要将以前<div id="script-area">清空一遍，防止以前的JS代码再执行一次。

当前字符属于CSS时，每次打印过程，一方面会将未格式化的字符串传入<style id="style-elem">中，用以生成样式。另外一方面会将格式化的代码输出到<pre id="my-code">中，用以展现代码。

cssHighlight和jsHighlight

这两个函数十分相似，主要做用就是经过正则匹配，给不一样类型的字符两端封上不一样的标签，用以高亮代码。举个栗子：

if (openInteger && !which.match(/[0-9\.]/) && !openString && !openComment) {
    s = string.replace(/([0-9\.]*)$/, "<em class=\"int\">$1</em>" + which);
}
复制代码

这就是一处典型的匹配+替换标签组合拳。做用是代码在以数字结尾时，给数字两端封上<em class="int"></em>的标签。

代码中还有不少用做标志位的参数，好比说openInteger，表示这段输入都是数字。经过对这些控制位进行操做，能够将零散的字符分红一段一段的，方便进行处理。

其余部分就不谈了，本身能够看源代码，我已经加了备注。

使用方法

---

您能够fork过去直接修改，也能够按照以下步骤操做

git clone https://github.com/tuobaye0711/code-printer.git
复制代码

安装依赖文件

npm install
复制代码

打包文件

npm start
复制代码

起服务

npm run server
复制代码

修改配置说明：

resume 文件存放简历或者其余静态资源

source/code.js 存放须要打印并展现样式的代码（CSS/JS）

source/app.js 是主代码，能够修改一些好比说打印速度、高亮色等配置

小结

---

能在本身网站挂一份带打印特效的简历，想必能让人眼前一亮吧。这篇文章主要安利了一下我这个名为code-printer的小项目，但愿能帮到各位~