使用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的小項目，但願能幫到各位~