Another idea implement insert custom code box in the blog JS
cnblogs @ Orcim
Flower took a few days, once again highlighted code box insert wrote in a blog text stuff. The reason is that the last written Highlight program after discovering a lot of problems, but also to poor compatibility with many browsers, so I want to start over. Compared to the last time, this time no matter what the compatibility or interface to be much better:
And customizations richer:
VS Code principle or rely on the Copy With Syntax Highlightingneed to open the option copy editor syntax highlighting.
Instructions
This afternoon uploaded to put the code on GitHub: CodeBoxBuilder , then took some time to fix the problem, and now this version is relatively stable. We can be assured, of course, there must be questions, please see this article feedback - if someone strike. To blog Park, for example, the following I will introduce it to usage (step) in more detail. Determined, you can edit your own style sheet for secondary processing.
Step 1 Preparations
Download CodeBoxBuilder, links on GitHub, download zip decompression, found in the root directory at the beginning of this section icons.css, codebox.cssthe editor And then found in the root directory codebox.js, find the "blog sidebar notice," JS code inside the file is also copied into it, while adding the page onload event addExpandBtnEvents()addCopyBtnEvents()andsolveDatasetCSS()
Step 2 Open the editor syntax highlighting replication
As I mentioned earlier, this web program is syntax highlighting dependent on VSCode copy function, with another editor if such a function, then generally apply. So we must first open or activate this function, first and then copy the code period is highlighted editor.
Step 3 generates an HTML code box
根目录下找到app.html，浏览器打开（推荐Chrome），在页面内进行粘贴操作，键盘Ctrl + V或者在页面的文本框内右键选择粘贴即可，不要粘贴为纯文本。如果剪切板内容合法，会出现第二个对话框，否则控制台会报错，并且会输出剪切板的内容，方便找到错误原因。
第二个对话框是方便自定义的，自定义内容包括设置代码框的标题栏文字和文件图标，代码框最大高度，以及是否添加复制按钮，是否应用代码高亮区域的除文字颜色外的其他样式（斜体、粗体等），点击确定后就可以在接下来的对话框内得到一串HTML文本。
Step 4 生效代码框
譬如博客园，新建一个随笔，找到编辑器工具栏的“编辑HTML代码”按钮，然后粘贴上一步得到的HTML文本，然后保存随笔，就行了，虽然在编辑器预览的时候感觉很乱，但在查看时应用了CSS就没问题。
下面是一些demo，看下效果，嘻嘻。
演示
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
| 21 |
| 22 |
| 23 |
| 24 |
| 25 |
| 26 |
| 27 |
| 28 |
| 29 |
| 30 |
| 31 |
| 32 |
| 33 |
| 34 |
| 35 |
| 36 |
| 37 |
| 38 |
| { |
| "db_path": "~/server/db/datesData.json", |
| "created": "2019/08/04-14:50:40", |
| "db": { |
| "2019": { |
| "8": { |
| "4": [{ |
| "id": "[2019-08-04]#1", |
| "title": "创建你的第一条今日便笺", |
| "content": "回到「日历」页面，点击顶部右上角「添加按钮」，开始创建你的第一条便笺！\n更多信息请点击菜单中的「帮助」。", |
| "update_time": "14:50" |
| }] |
| } |
| } |
| }, |
| "settings": [{ |
| "name": "节日或事件显示程度", |
| "options": [{ |
| "label": "一般", |
| "checked": true |
| }, { |
| "label": "普通", |
| "checked": false |
| }, { |
| "label": "全部", |
| "checked": false |
| }] |
| }, { |
| "name": "周首日", |
| "options": [{ |
| "label": "周一", |
| "checked": false |
| }, { |
| "label": "周日", |
| "checked": true |
| }] |
| }] |
| } |
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| var cssfy = str => { |
| let arr = str.split(/;[\ ]?/); |
| let json = {}; |
| arr.forEach(item => { |
| let r = item.split(/:[\ ]?/); |
| r[0] && (json[r[0]] = r[1]); |
| }); |
| // console.log(arr) |
| return json; |
| }; |
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
| 21 |
| 22 |
| 23 |
| 24 |
| 25 |
| 26 |
| 27 |
| 28 |
| 29 |
| 30 |
| 31 |
| 32 |
| 33 |
| 34 |
| 35 |
| 36 |
| 37 |
| 38 |
| 39 |
| 40 |
| 41 |
| 42 |
| 43 |
| 44 |
| 45 |
| 46 |
| 47 |
| 48 |
| 49 |
| 50 |
| 51 |
| 52 |
| 53 |
| 54 |
| 55 |
| 56 |
| 57 |
| 58 |
| <template> |
| <div class="chevron-button" :class="{[position]: true}"> |
| <div class="activer" @mouseover="shown" @mouseout="hidden" @click="slideMonth"> |
| <transition name="fade"> |
| <img :src="`src/img/chevron_${position}.svg`" :alt="`chevron_${position}.svg`" v-show="chevronShow"> |
| </transition> |
| </div> |
| </div> |
| </template> |
| <script> |
| export default { |
| "name": "chevronBtn", |
| "props": ["position", "chevronShow"], |
| "methods": { |
| shown () { |
| this.$emit("shown", this.position); |
| }, |
| hidden () { |
| this.$emit("hidden", this.position); |
| }, |
| slideMonth () { |
| this.$emit("slideMonth", this.position); |
| } |
| } |
| } |
| </script> |
| <style> |
| .chevron-button{ |
| position: absolute; top: 0; z-index: 2; |
| display: flex; align-items: center; |
| width: 8px; height: 100%; |
| /* background-color: green; */ |
| } |
| .chevron-button.left{ |
| left: 0; |
| } |
| .chevron-button.right{ |
| right: 0; |
| } |
| .chevron-button .activer{ |
| display: flex; align-items: center; |
| height: 72%; width: 100%; |
| /* background-color: blue; */ |
| opacity: .8; |
| } |
| .chevron-button .activer:active{ |
| opacity: 1; |
| } |
| .chevron-button.left .activer{ |
| flex-direction: row; |
| } |
| .chevron-button.right .activer{ |
| flex-direction: row-reverse; |
| } |
| .chevron-button .activer img{ |
| cursor: pointer; -webkit-tap-highlight-color: transparent; |
| } |
| </style> |