もう一つのアイデアブログに挿入カスタムコードボックスを実装するJS
cnblogs @ Orcim
花は 数日を要し、再び強調されたコードボックスの挿入は、ブログのテキストのものに書きました。その理由は、多くの問題を発見した後、だけでなく、多くのブラウザとの相溶性に最後に書き込まれたハイライト番組ということですので、私は最初からやり直したいです。前回と比較すると、何があっ互換性やインタフェース今回ははるかに良いします
そして、豊かなカスタマイズ：
コード原理VSかに依存しているCopy With Syntax Highlightingオプションのコピーエディタのシンタックスハイライトを開く必要があります。
使用
この日の午後は、GitHubの上でコードを入れてアップロード：CodeBoxBuilderは、その問題を解決するためにいくつかの時間がかかった、そして今、このバージョンでは、比較的安定しています。誰かが打つ場合-私たちはもちろん、質問がなければならない、この記事へのフィードバックを参照してください、保証することができます。公園をブログに、例えば、以下は私がより詳細に使い方（ステップ）にそれを紹介します。決定され、あなたは二次加工のために、独自のスタイルシートを編集することができます。
ステップ1準備
、CodeBoxBuilderをダウンロードして、このセクションの最初にルートディレクトリにGitHubの、ダウンロードZIP伸張、上のリンクicons.css、 codebox.cssエディタが両方のファイルを開いて、ブログの裏庭を開く：プロファイル管理をクリック- [設定]をクリックします-ページのカスタマイズで発見入力ボックスに、2つのファイルのすべての内容をコピーしますCSSコード。そして、ルートディレクトリにあるcodebox.js、また、それにコピーされたファイル内の「ブログのサイドバー通知、」JSコードを見つけるページonloadイベントを追加しているaddExpandBtnEvents()addCopyBtnEvents()と、solveDatasetCSS()
ステップ2を開き、エディタの構文の強調表示、複製が
私は先に述べたように、このWebプログラムは、このような機能は、その後、一般的に適用した場合、他のエディタで、VSCodeコピー機能に依存して強調表示する構文は次のとおりです。だから我々は、最初に開く必要がありますか、この機能をアクティブに、最初にして、コードの期間はエディタを強調表示されているコピーします。
ステップ3は、HTMLコードボックスを生成し、
根目录下找到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> |