問題1：Python中沒有指針導致循環出錯
解決方法：
由於循環的是在一個turple中循環，即使本輪循環中循環變量i的值改變了，但是本輪循環結束在下次循環開始時，循環變量i仍然會被重新賦值爲turple中的下一個元素，導致用i作爲指針來尋得數組對應下標元素的方法失敗。
因此，增添一個變量充當指針，控制循環變量i的值，若搜索位置大於turple中下一個元素的值，continue，直到i追上pointer。這樣，自定義的一個指針就可以使用了。
# 詞法分析
def analyze(self):
self.furnace = ''
# 蟒生污點 不能修改循環遍歷 自建指針
pointer = -1 # pointer初始化爲0時 第一個字符無法讀取 所以初始化爲-1
for i in range(len(self.raw)):
# 判斷循環變量與指針的位置
if i <= pointer:
continue
else:
if self.is_letter(self.raw[i]) or self.is_underline(self.raw[i]) or self.is_sharp(self.raw[i]):
# 讀入該字符 移動指針
self.furnace += self.raw[i]
i += 1
pointer = i
# 使用 while 讀完整個單詞和下一位 然後回退一位
# #include 等只能以#打頭 中間不允許出現 所以這裏不包含 self.is_sharp(self.raw[i])
while self.is_letter(self.raw[i]) or self.is_underline(self.raw[i]) or self.is_digit(self.raw[i]):
self.furnace += self.raw[i]
# 修改臨時循環變量通過 while 讀取下一個字符
i += 1
# 修改自定義指針
pointer = i
# 【重點】多讀一位 -> 回退
pointer -= 1
elif：
.......
問題2：雙引號、單引號內的字符串轉義字符無法高亮展示
解決方法：
version1.0版本中生成HTML文件展示時可以高亮顯示：
<span class="string">'123<strong class="escape">\t</strong><strong class="escape">\n</strong>'</span>
但是在version2.0版本中實時渲染HTML時會被當做字符串不被渲染，因此只能退而求其次在識別轉義字符時直接存儲爲HTML文本並賦予css樣式
# 轉義字符
if self.is_slash(self.raw[i]):
self.furnace += "<strong class=\"escape\">" + self.raw[i] + self.raw[i + 1] + "</strong>"
i += 2
pointer = i
問題3：輸出在HTML頁面時，空格和換行鍵需要二次轉義
解決方法：
渲染特殊字符如：空格、製表符、換行時由於HTML作爲標記語言對這些特殊符號需要二次轉義。
# 轉義
def trans(self, ch):
if self.is_enter(ch):
return "<br>"
elif self.is_tab(ch):
return " "
elif ch == ' ':
return " "
else:
return ch
<span>\t</span>無法顯示製表符
需要改爲<span> </span>
<span> </span>無法顯示多個空格，大於等於兩個空格僅會被識別爲一個
需要改爲<span>    </span>
<span>\n</span>無法顯示換行
需要改爲<span><br></span>
問題4：渲染出的高亮內容引用CSS樣式失效
解決方法：
雖然可以綁定：class 但是沒有 deep 所以不會渲染 使用 >>> 修改 css 選擇器
舉兩個栗子：
.grid-content >>> .sharpe-special {
color: orange;
}
.grid-content >>> .arrow-special {
color: turquoise;
}
問題5：textarea輸入Tab鍵不被讀入反而會切換focus組件
解決方法：
由於tab鍵被瀏覽器綁定爲切換focus組件，因此在輸入框內輸入tab鍵時無法被讀入。因此，在頁面渲染完成之後立即對tab鍵進行全局監聽，當tab按下時首先阻止默認綁定的事件發生，然後在輸入框光標所在位置插入轉義字符\t。
document.onkeydown = function (e) {
let key = window.event.keyCode; // tab的值爲9
// console.log(event.shiftKey);
// console.log(key);
if (key === 9) {
// 阻止默認事件
window.event.preventDefault();
// 獲取輸入框信息
let elInput = document.getElementById("userInput");
let startPos = elInput.selectionStart;
let endPos = elInput.selectionEnd;
if (startPos === undefined || endPos === undefined) return;
let txt = elInput.value;
// 插入文本
elInput.value = txt.substring(0, startPos) + "\t" + txt.substring(endPos); // 中間爲插入文本
elInput.focus();
elInput.selectionStart = startPos + 1; // 插入字符的長度
elInput.selectionEnd = startPos + 1; // 插入字符的長度
}
}
問題6：@on-change監聽textarea內容失效
解決方法：
由於Vuejs是原生框架但是ElementUI是經過二次開發的組件並且現在仍在不停更新和修復Bug，一些事件的綁定可能會導致衝突而無法使用。因此打算改用全局watch監聽器。watch可以監控一個值的變換，並調用因爲變化需要執行的方法——可以實現實時的代碼高亮，可以通過watch動態改變關聯的狀態——對輸入內容進行實時雙向綁定改變。
使用watch監聽變量code即左邊textarea中用戶輸入的文本內容，如果發生改變則訪問接口將用戶輸入代碼傳給後端並從接受後端返回的高亮HTML代碼賦值與變量beauty。
watch: {
code: function (val, old) {
調用接口;
}
問題7：自定義輸入框的樣式不被渲染
解決方法：
直接在style標籤中使用css選擇器對組件el-textarea進行樣式的添加只會改變其外部樣式，原因是因爲組件el-textarea是原生組件的封裝，內部仍有若干原生組件，因此需要改變的內部組件的樣式。使用F12對元素進行檢查發現其內部輸入框的樣式選擇器名稱爲el-textarea__inner，因此對其進行二次加工即可。
