源自: 中文化 類C編程語言 需要什麼樣的關鍵字? · Issue #40 · program-in-chinese/overview. 原型爲純前端, 本地瀏覽器運行效果如下:
關鍵詞選取的討論已經不少, 往往都有各人偏好的風格. 這個原型旨在通過實驗各種用詞在實際代碼中的效果, 使討論更接近實用. 也許在完善後也可用來演示其他風格的中文編程語言設計.
源碼庫在: program-in-chinese/demo_keyword_design_by_code
代碼選自program-in-chinese/team_website (中文代碼示例之冒泡算法, 後感), 代碼塊的HTML代碼是直接截取了jekyll轉換後的HTML源碼, 高亮也是利用了jekyll的自帶css.
原型中其他的源碼如下
主界面.html
主要內容是三塊
- 原始代碼 - 使用英文關鍵詞的代碼
- 替換關鍵詞後的代碼 - 根據關鍵詞詞典, 對所有相關關鍵詞進行替換後生成的代碼
- 關鍵詞修改表 - 顯示所有關鍵詞的對應中文, 進行修改後可以即時看到代碼替換後的效果
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<span>原代碼</span>
<div id = "原代碼">
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="err">前</span> <span class="ow">in</span> <span class="nb">xrange</span><span class="p">(</span><span class="nb">len</span><span class="p">(</span><span class="n">a</span><span class="p">)):</span>
<span class="k">for</span> <span class="err">後</span> <span class="ow">in</span> <span class="nb">xrange</span><span class="p">(</span><span class="err">前</span> <span class="o">+</span> <span class="mi">1</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">a</span><span class="p">)):</span>
<span class="k">if</span> <span class="n">a</span><span class="p">[</span><span class="err">前</span><span class="p">]</span> <span class="o">></span> <span class="n">a</span><span class="p">[</span><span class="err">後</span><span class="p">]:</span>
<span class="n">a</span><span class="p">[</span><span class="err">前</span><span class="p">],</span> <span class="n">a</span><span class="p">[</span><span class="err">後</span><span class="p">]</span> <span class="o">=</span> <span class="n">a</span><span class="p">[</span><span class="err">後</span><span class="p">],</span> <span class="n">a</span><span class="p">[</span><span class="err">前</span><span class="p">]</span>
</code></pre></div></div>
</div>
<span>替換後代碼</span>
<div id = "替換後代碼">
</div>
<div id = "替換表">
</div>
<script src="詞替換.js"></script>
</body>
</html>
詞替換.js
初始時有默認的關鍵詞詞典(爲演示之用只加了三個, 歡迎提交添加/修改, 最好實現多套關鍵詞可選). 頁面加載時, 按照這個默認詞典對"原代碼"中的代碼進行關鍵詞替換, 並按每個關鍵詞一行動態生成"替換表"可供用戶手動修改.
var 關鍵詞詞典 = {
'for': '對於',
'in': '在',
'if': '如果'
};
function 替換所有關鍵詞() {
var 原代碼拷貝 = document.getElementById("原代碼").children[0].cloneNode(true);
var 字段列表 = 原代碼拷貝.getElementsByTagName('span');
for (var i = 0; i < 字段列表.length; i++) {
var 字段內容 = 字段列表[i].textContent;
var 對應中文詞 = 關鍵詞詞典[字段內容];
if (對應中文詞) {
字段列表[i].textContent = 對應中文詞;
}
}
var 替換代碼塊 = document.getElementById("替換後代碼");
if (替換代碼塊.children.length == 1) {
替換代碼塊.removeChild(替換代碼塊.children[0]);
}
替換代碼塊.appendChild(原代碼拷貝);
}
// <div><span>for</span><input type="text" name="for替換" value="對於"></div>
function 創建替換詞條(原詞文本, 替換文本) {
var 詞條 = document.createElement("div");
var 原詞 = document.createElement('span');
原詞.textContent = 原詞文本;
var 替換 = document.createElement('input');
var 替換輸入框名 = 原詞文本 + '替換';
替換.type = 'text';
替換.name = 替換輸入框名;
替換.value = 替換文本;
詞條.appendChild(原詞);
詞條.appendChild(替換);
return 詞條;
}
function 取輸入監聽函數(關鍵詞) {
return function() {
關鍵詞詞典[關鍵詞] = document.getElementsByName(關鍵詞 + '替換')[0].value;
替換所有關鍵詞();
};
}
替換所有關鍵詞();
var 替換表 = document.getElementById("替換表");
for(var 關鍵詞 in 關鍵詞詞典) {
替換表.appendChild(創建替換詞條(關鍵詞, 關鍵詞詞典[關鍵詞]));
var 替換輸入框名 = 關鍵詞 + '替換';
document.getElementsByName(替換輸入框名)[0].addEventListener('input', 取輸入監聽函數(關鍵詞));
}
歡迎添加新例程, 尤其是較短自成一體的中文命名的例程.