['.concat(e[0],"]: ").concat(e[1],""):'
['.concat(e[0],"] ").concat(e[1],": ").concat(e[2],"")}));return"
引用链接
").concat(e.join("\n"),"
")},this.buildAddition=function(){return'\n \n '},this.setOptions=function(e){t.opts=s(t.opts,e)},this.hasFootnotes=function(){return 0!==o.length},this.getRenderer=function(e){o=[],i=0,r=t.buildTheme(t.opts.theme);var a=new je.a.Renderer;return a.heading=function(e,t){switch(t){case 1:return"").concat(e,"
");case 2:return"").concat(e,"
");case 3:return"").concat(e,"
");default:return"").concat(e,"
")}},a.paragraph=function(e){return"").concat(e,"
")},a.blockquote=function(e){return e=e.replace(/")),"
").concat(e,"")},a.code=function(e,t){e=e.replace(//g,">");for(var n=e.split("\n"),o=[],i=[],r=0;r
","")),i.push("")}var s=t||"";return'\n
- '.concat(i.join(""),'
\n ').concat(o.join(""),"\n \n ").concat(e,"")},a.listitem=function(e){return"<%s/>').concat(e,"")},a.list=function(e,t,n){e=e.replace(/<\/*p.*?>/g,"");var o=e.split("<%s/>");if(!t)return e=o.join("•"),"").concat(e,"
");e=o[0];for(var i=1;i'},a}},ze=Ne,$e='# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\n\n## 使用自动补全\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\n\n\n\n在上图示例中，我们可以看到，输入关键字 `juej`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\n\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\n\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\n\n## 基于“预测”而非“建议”\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\n\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\n\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 `juej` 更改为 `juex` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\n\n\n\n## 为什么看不到某些联想词？\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\n\n- 这个关键字不是热门字词；\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\n\n## 为什么会看到某些不当的联想词？\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\n\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\n\n\n\n## 如何实现自动补全算法？\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\n\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\n\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\n\n### 词汇表实现\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\n\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\n\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 `O(log N)`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\n\n### 前缀树实现\n通常来说，许多词汇都以相同的前缀开头，比如 `need`、`nested` 都以 `ne` 开头，`seed`、`speed` 都以 `s` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\n\n\n\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\n\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 `ne` 对应于从子节点取左边缘 `N` 和唯一边缘 `E` 的路径。然后可以通过继续遍历从 `E` 节点可以达到的所有叶节点来生成补全列表。在图中，`ne` 的补全可以是两个分支：`-ed` 和 `-sted`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\n\n### 有限状态自动机(DFA)实现\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 `ed`、`ing`、`tion` 在英文单词中特别常见。在上一个例子中，`e`、`d` 分别存放在了每一个分支上。\n\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\n\n
\n"+e+"",o=o.firstChild,n&&a(o,n,!0),c({j:t,m:n,h:o,l:1,a:null,i:null,c:null,g:null}),o.innerHTML},prettyPrint:u.prettyPrint=function(e,t){function n(){for(var t=u.PR_SHOULD_USE_CONTINUATION?p.now()+250:1/0;g
\n
\n\n\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Loading.vue?vue&type=template&id=71788ed8&scoped=true&\"\nimport script from \"./Loading.vue?vue&type=script&lang=js&\"\nexport * from \"./Loading.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"71788ed8\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\",class:{'container_night': _vm.nightMode}},[_c('el-container',[_c('el-header',{staticClass:\"editor__header\"},[_c('editor-header',{on:{\"refresh\":_vm.onEditorRefresh,\"uploaded\":_vm.uploaded,\"cssChanged\":_vm.cssChanged,\"showBox\":function($event){_vm.showBox = !_vm.showBox},\"showAboutDialog\":function($event){_vm.aboutDialogVisible = true},\"showDialogForm\":function($event){_vm.dialogFormVisible = true},\"startCopy\":function($event){_vm.isCoping = true, _vm.backLight = true},\"endCopy\":_vm.endCopy}})],1),_c('el-main',{staticClass:\"main-body\"},[_c('el-row',{staticClass:\"main-section\",attrs:{\"gutter\":10}},[_c('el-col',{attrs:{\"span\":12}},[_c('textarea',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.source),expression:\"source\"}],attrs:{\"id\":\"editor\",\"type\":\"textarea\",\"placeholder\":\"Your markdown text here.\"},domProps:{\"value\":(_vm.source)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.source=$event.target.value}}})]),_c('el-col',{staticClass:\"preview-wrapper\",class:{'preview-wrapper_night': _vm.nightMode && _vm.isCoping},attrs:{\"span\":12,\"id\":\"preview\"}},[_c('section',{class:{'output_night': _vm.nightMode && !_vm.backLight},attrs:{\"id\":\"output-wrapper\"}},[_c('div',{staticClass:\"preview\"},[_c('section',{attrs:{\"id\":\"output\"},domProps:{\"innerHTML\":_vm._s(_vm.output)}}),(_vm.nightMode && _vm.isCoping)?_c('div',{staticClass:\"loading-mask\"},[_c('div',{staticClass:\"loading__img\"}),_c('span',[_vm._v(\"正在生成\")])]):_vm._e()])])]),_c('transition',{attrs:{\"name\":\"custom-classes-transition\",\"enter-active-class\":\"animated bounceInRight\"}},[_c('el-col',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showBox),expression:\"showBox\"}],attrs:{\"id\":\"cssBox\",\"span\":12}},[_c('textarea',{attrs:{\"id\":\"cssEditor\",\"type\":\"textarea\",\"placeholder\":\"Your custom css here.\"}})])],1)],1)],1)],1),_c('about-dialog',{attrs:{\"aboutDialogVisible\":_vm.aboutDialogVisible},on:{\"close\":function($event){_vm.aboutDialogVisible = false}}}),_c('insert-form-dialog',{attrs:{\"dialogFormVisible\":_vm.dialogFormVisible},on:{\"close\":function($event){_vm.dialogFormVisible = false}}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import CodeMirror from \"codemirror/lib/codemirror\";\n(function () {\n CodeMirror.extendMode('css', {\n commentStart: '/*',\n commentEnd: '*/',\n newlineAfterToken: function (type, content) {\n return /^[;{}]$/.test(content)\n }\n })\n\n // Comment/uncomment the specified range\n CodeMirror.defineExtension('commentRange', function (isComment, from, to) {\n var cm = this; var curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode\n cm.operation(function () {\n if (isComment) { // Comment range\n cm.replaceRange(curMode.commentEnd, to)\n cm.replaceRange(curMode.commentStart, from)\n if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside\n { cm.setCursor(from.line, from.ch + curMode.commentStart.length) }\n } else { // Uncomment range\n var selText = cm.getRange(from, to)\n var startIndex = selText.indexOf(curMode.commentStart)\n var endIndex = selText.lastIndexOf(curMode.commentEnd)\n if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {\n // Take string till comment start\n selText = selText.substr(0, startIndex) +\n // From comment start till comment end\n selText.substring(startIndex + curMode.commentStart.length, endIndex) +\n // From comment end till string end\n selText.substr(endIndex + curMode.commentEnd.length)\n }\n cm.replaceRange(selText, from, to)\n }\n })\n })\n\n // Applies automatic mode-aware indentation to the specified range\n CodeMirror.defineExtension('autoIndentRange', function (from, to) {\n var cmInstance = this\n this.operation(function () {\n for (var i = from.line; i <= to.line; i++) {\n cmInstance.indentLine(i, 'smart')\n }\n })\n })\n\n // Applies automatic formatting to the specified range\n CodeMirror.defineExtension('autoFormatRange', function (from, to) {\n var cm = this\n var outer = cm.getMode(); var text = cm.getRange(from, to).split('\\n')\n var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state)\n var tabSize = cm.getOption('tabSize')\n\n var out = ''; var lines = 0; var atSol = from.ch == 0\n function newline () {\n out += '\\n'\n atSol = true\n ++lines\n }\n\n for (var i = 0; i < text.length; ++i) {\n var stream = new CodeMirror.StringStream(text[i], tabSize)\n while (!stream.eol()) {\n var inner = CodeMirror.innerMode(outer, state)\n var style = outer.token(stream, state); var cur = stream.current()\n stream.start = stream.pos\n if (!atSol || /\\S/.test(cur)) {\n out += cur\n atSol = false\n }\n if (!atSol && inner.mode.newlineAfterToken &&\n inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || '', inner.state)) { newline() }\n }\n if (!stream.pos && outer.blankLine) outer.blankLine(state)\n if (!atSol) newline()\n }\n\n cm.operation(function () {\n cm.replaceRange(out, from, to)\n for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) { cm.indentLine(cur, 'smart') }\n cm.setSelection(from, cm.getCursor(false))\n })\n })\n})()\n","import axios from 'axios';\n\n// 创建axios实例\nconst service = axios.create({\n baseURL: '',\n timeout: 10 * 1000 // 请求超时时间\n});\n\nservice.interceptors.request.use(\n config => {\n if (/^(post)|(put)|(delete)$/i.test(config.method)) {\n if (config.data && config.data.upload) {\n config.headers['Content-Type'] = 'multipart/form-data';\n }\n }\n return config;\n }, error => {\n Promise.reject(error);\n }\n);\n\nservice.interceptors.response.use(res => {\n if (res.data.success) {\n return res.data;\n }\n console.log(res);\n return Promise.reject(res.data);\n}, error => Promise.reject(error));\n\nexport default service;","import fetch from './fetch';\n\n\nfunction fileUpload(data) {\n return fetch({\n url: 'https://imgkr.com/api/files/upload',\n method: 'post',\n data: data\n })\n}\n\n\nexport default {\n fileUpload\n};","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-container',{staticClass:\"top is-dark\"},[_c('el-upload',{staticClass:\"header__item\",attrs:{\"action\":\"https://imgkr.com/api/files/upload\",\"headers\":{'Content-Type': 'multipart/form-data'},\"show-file-list\":false,\"multiple\":true,\"accept\":\".jpg,.jpeg,.png,.gif\",\"name\":\"file\",\"before-upload\":_vm.beforeUpload}},[_c('el-tooltip',{attrs:{\"effect\":_vm.effect,\"content\":\"上传图片\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-upload\",attrs:{\"size\":\"medium\"}})])],1),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"下载编辑框Markdown文档\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-download\",attrs:{\"size\":\"medium\"},on:{\"click\":_vm.downloadEditorContent}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"重置页面\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-refresh\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){_vm.showResetConfirm = true}}})]),_c('el-tooltip',{staticClass:\"header__item header__item_last\",attrs:{\"effect\":_vm.effect,\"content\":\"插入表格\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-s-grid\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('showDialogForm')}}})]),_c('el-form',{staticClass:\"ctrl\",attrs:{\"size\":\"mini\",\"inline\":true}},[_c('el-form-item',[_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择字体\",\"clearable\":\"\"},on:{\"change\":_vm.fontChanged},model:{value:(_vm.selectFont),callback:function ($$v) {_vm.selectFont=$$v},expression:\"selectFont\"}},_vm._l((_vm.config.builtinFonts),function(font){return _c('el-option',{key:font.value,style:({fontFamily: font.value}),attrs:{\"label\":font.label,\"value\":font.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(font.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(\"Abc\")])])}),1)],1),_c('el-form-item',[_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择段落字号\",\"clearable\":\"\"},on:{\"change\":_vm.sizeChanged},model:{value:(_vm.selectSize),callback:function ($$v) {_vm.selectSize=$$v},expression:\"selectSize\"}},_vm._l((_vm.config.sizeOption),function(size){return _c('el-option',{key:size.value,attrs:{\"label\":size.label,\"value\":size.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(size.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(size.desc))])])}),1)],1),_c('el-form-item',[_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择颜色\",\"clearable\":\"\"},on:{\"change\":_vm.colorChanged},model:{value:(_vm.selectColor),callback:function ($$v) {_vm.selectColor=$$v},expression:\"selectColor\"}},_vm._l((_vm.config.colorOption),function(color){return _c('el-option',{key:color.value,attrs:{\"label\":color.label,\"value\":color.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(color.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(color.hex))])])}),1)],1),_c('el-tooltip',{attrs:{\"content\":\"自定义颜色\",\"effect\":_vm.effect,\"placement\":\"top\"}},[_c('el-color-picker',{attrs:{\"size\":\"mini\",\"show-alpha\":\"\"},on:{\"change\":_vm.colorChanged},model:{value:(_vm.selectColor),callback:function ($$v) {_vm.selectColor=$$v},expression:\"selectColor\"}})],1),_c('el-tooltip',{attrs:{\"content\":\"微信外链自动转为文末引用\",\"effect\":_vm.effect,\"placement\":\"top\"}},[_c('el-switch',{staticClass:\"header__switch\",attrs:{\"active-color\":\"#67c23a\",\"inactive-color\":\"#dcdfe6\"},on:{\"change\":_vm.statusChanged},model:{value:(_vm.citeStatus),callback:function ($$v) {_vm.citeStatus=$$v},expression:\"citeStatus\"}})],1)],1),_c('el-tooltip',{staticClass:\"item\",attrs:{\"effect\":_vm.effect,\"content\":\"自定义CSS样式\",\"placement\":\"left\"}},[_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\",\"icon\":\"el-icon-setting\"},on:{\"click\":_vm.customStyle}})],1),_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\"},on:{\"click\":_vm.copy}},[_vm._v(\"复制\")]),_c('el-button',{staticClass:\"about\",attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('showAboutDialog')}}},[_vm._v(\"关于\")]),_c('el-tooltip',{attrs:{\"content\":\"夜间模式\",\"placement\":\"bottom-start\"}},[(!_vm.nightMode)?_c('div',{staticClass:\"mode__switch\",on:{\"click\":_vm.themeChanged}}):_c('div',{staticClass:\"mode__switch mode__switch_black\",on:{\"click\":_vm.themeChanged}})]),_c('resetDialog',{attrs:{\"showResetConfirm\":_vm.showResetConfirm},on:{\"confirm\":_vm.confirmReset,\"close\":_vm.cancelReset}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export default {\n BASE: {\n 'text-align': 'left',\n 'color': '#3f3f3f',\n 'line-height': '1.75',\n },\n BASE_BLOCK: {\n 'margin': '1em 8px'\n },\n block: {\n // 一级标题样式\n h1: {\n 'font-size': '1.2em',\n 'text-align': 'center',\n 'font-weight': 'bold',\n 'display': 'table',\n 'margin': '2em auto 1em',\n 'padding': '0 1em',\n 'border-bottom': '2px solid rgba(0, 152, 116, 0.9)'\n },\n\n // 二级标题样式\n h2: {\n 'font-size': '1.2em',\n 'text-align': 'center',\n 'font-weight': 'bold',\n 'display': 'table',\n 'margin': '4em auto 2em',\n 'padding': '0 0.2em',\n 'background': 'rgba(0, 152, 116, 0.9)',\n 'color': '#fff'\n },\n\n // 三级标题样式\n h3: {\n 'font-weight': 'bold',\n 'font-size': '1.1em',\n 'margin': '2em 8px 0.75em 0',\n 'line-height': '1.2',\n 'padding-left': '8px',\n 'border-left': '3px solid rgba(0, 152, 116, 0.9)'\n },\n\n // 四级标题样式\n h4: {\n 'font-weight': 'bold',\n 'font-size': '1em',\n 'margin': '2em 8px 0.5em',\n 'color': 'rgba(66, 185, 131, 0.9)'\n },\n\n // 段落样式\n p: {\n 'margin': '1.5em 8px',\n 'letter-spacing': '0.1em'\n },\n\n // 引用样式\n blockquote: {\n 'font-style': 'normal',\n 'border-left': 'none',\n 'padding': '1em',\n 'border-radius': '4px',\n 'color': '#FEEEED',\n 'background': 'rgba(27,31,35,.05)',\n 'margin': '2em 8px'\n },\n\n blockquote_p: {\n 'letter-spacing': '0.1em',\n 'color': 'rgb(80, 80, 80)',\n 'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',\n 'font-size': '1em',\n 'display': 'inline',\n },\n\n code: {\n 'font-size': '80%',\n 'overflow': 'auto',\n 'color': '#333',\n 'background': 'rgb(247, 247, 247)',\n 'border-radius': '2px',\n 'padding': '10px',\n 'line-height': '1.5',\n 'border': '1px solid rgb(236,236,236)',\n 'margin': '20px 0',\n },\n\n image: {\n 'border-radius': '4px',\n 'display': 'block',\n 'margin': '0.1em auto 0.5em',\n 'width': '100% !important',\n },\n\n image_org: {\n 'border-radius': '4px',\n 'display': 'block'\n },\n\n ol: {\n 'margin-left': '0',\n 'padding-left': '1em'\n },\n\n ul: {\n 'margin-left': '0',\n 'padding-left': '1em',\n 'list-style': 'circle'\n },\n\n footnotes: {\n 'margin': '0.5em 8px',\n 'font-size': '80%'\n },\n\n figure: {\n 'margin': '1.5em 8px',\n }\n },\n inline: {\n listitem: {\n 'text-indent': '-1em',\n 'display': 'block',\n 'margin': '0.2em 8px'\n },\n\n codespan: {\n 'font-size': '90%',\n 'color': '#d14',\n 'background': 'rgba(27,31,35,.05)',\n 'padding': '3px 5px',\n 'border-radius': '4px',\n },\n\n link: {\n 'color': '#576b95'\n },\n\n wx_link: {\n 'color': '#576b95',\n 'text-decoration': 'none',\n },\n\n // 字体加粗样式\n strong: {\n 'color': 'rgba(15, 76, 129, 0.9)',\n 'font-weight': 'bold',\n },\n\n table: {\n 'border-collapse': 'collapse',\n 'text-align': 'center',\n 'margin': '1em 8px'\n },\n\n thead: {\n 'background': 'rgba(0, 0, 0, 0.05)',\n 'font-weight': 'bold'\n },\n\n td: {\n 'border': '1px solid #dfdfdf',\n 'padding': '0.25em 0.5em'\n },\n\n footnote: {\n 'font-size': '12px'\n },\n\n figcaption: {\n 'text-align': 'center',\n 'color': '#888',\n 'font-size': '0.8em'\n }\n }\n};\n","import default_theme from './themes/default-theme'\nimport prettier from 'prettier/standalone'\nimport prettierMarkdown from 'prettier/parser-markdown'\n\n\n// 设置自定义颜色\nexport function setColorWithTemplate (template) {\n return function (color) {\n let custom_theme = JSON.parse(JSON.stringify(template))\n custom_theme.block.h1['border-bottom'] = `2px solid ${color}`\n custom_theme.block.h2['background'] = color\n custom_theme.block.h3['border-left'] = `3px solid ${color}`\n custom_theme.block.h4['color'] = color\n custom_theme.inline.strong['color'] = color\n return custom_theme\n }\n}\n\nexport const setColorWithCustomTemplate = function setColorWithCustomTemplate (\n template,\n color\n) {\n let custom_theme = JSON.parse(JSON.stringify(template))\n custom_theme.block.h1['border-bottom'] = `2px solid ${color}`\n custom_theme.block.h2['background'] = color\n custom_theme.block.h3['border-left'] = `3px solid ${color}`\n custom_theme.block.h4['color'] = color\n custom_theme.inline.strong['color'] = color\n return custom_theme\n}\n\n// 设置自定义字体大小\nexport function setFontSizeWithTemplate (template) {\n return function (fontSize) {\n let custom_theme = JSON.parse(JSON.stringify(template))\n custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px`\n custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px`\n custom_theme.block.h3['font-size'] = `${fontSize}px`\n custom_theme.block.h4['font-size'] = `${fontSize}px`\n return custom_theme\n }\n}\n\nexport const setColor = setColorWithTemplate(default_theme)\nexport const setFontSize = setFontSizeWithTemplate(default_theme)\n\nexport function customCssWithTemplate (jsonString, color, theme) {\n let custom_theme = JSON.parse(JSON.stringify(theme))\n // block\n custom_theme.block.h1['border-bottom'] = `2px solid ${color}`\n custom_theme.block.h2['background'] = color\n custom_theme.block.h3['border-left'] = `3px solid ${color}`\n custom_theme.block.h4['color'] = color\n custom_theme.inline.strong['color'] = color\n\n custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1)\n custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2)\n custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3)\n custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4)\n custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p)\n custom_theme.block.blockquote = Object.assign(\n custom_theme.block.blockquote,\n jsonString.blockquote\n )\n custom_theme.block.blockquote_p = Object.assign(\n custom_theme.block.blockquote_p,\n jsonString.blockquote_p\n )\n custom_theme.block.image = Object.assign(\n custom_theme.block.image,\n jsonString.image\n )\n\n // inline\n custom_theme.inline.strong = Object.assign(\n custom_theme.inline.strong,\n jsonString.strong\n )\n custom_theme.inline.codespan = Object.assign(\n custom_theme.inline.codespan,\n jsonString.codespan\n )\n custom_theme.inline.link = Object.assign(\n custom_theme.inline.link,\n jsonString.link\n )\n custom_theme.inline.wx_link = Object.assign(\n custom_theme.inline.wx_link,\n jsonString.wx_link\n )\n\n return custom_theme\n}\n\n/**\n * 将CSS形式的字符串转换为JSON\n *\n * @param {css字符串} css\n */\nexport function css2json (css) {\n // 移除CSS所有注释\n while (\n (open = css.indexOf('/*')) !== -1 &&\n (close = css.indexOf('*/')) !== -1\n ) {\n css = css.substring(0, open) + css.substring(close + 2)\n }\n\n // 初始化返回值\n let json = {}\n\n while (css.length > 0 && css.indexOf('{') !== -1 && css.indexOf('}') !== -1) {\n // 存储第一个左/右花括号的下标\n const lbracket = css.indexOf('{')\n const rbracket = css.indexOf('}')\n\n // 第一步：将声明转换为Object，如：\n // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;`\n // ==>\n // `{\"font\": \"'Times New Roman' 1em\", \"color\": \"#ff0000\", \"margin-top\": \"1em\"}`\n\n // 辅助方法：将array转为object\n function toObject (array) {\n let ret = {}\n array.forEach(e => {\n const index = e.indexOf(':')\n const property = e.substring(0, index).trim()\n const value = e.substring(index + 1).trim()\n ret[property] = value\n })\n return ret\n }\n\n // 切割声明块并移除空白符，然后放入数组中\n let declarations = css\n .substring(lbracket + 1, rbracket)\n .split(';')\n .map(e => e.trim())\n .filter(e => e.length > 0) // 移除所有\"\"空值\n\n // 转为Object对象\n declarations = toObject(declarations)\n\n // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如：\n // `h1, p#bar {color: red}`\n // ==>\n // {\"h1\": {color: red}, \"p#bar\": {color: red}}\n\n let selectors = css\n .substring(0, lbracket)\n // 以,切割，并移除空格：`\"h1, p#bar, span.foo\"` => [\"h1\", \"p#bar\", \"span.foo\"]\n .split(',')\n .map(selector => selector.trim())\n\n // 迭代赋值\n selectors.forEach(selector => {\n // 若不存在，则先初始化\n if (!json[selector]) json[selector] = {}\n // 赋值到JSON\n Object.keys(declarations).forEach(key => {\n json[selector][key] = declarations[key]\n })\n })\n\n // 继续下个声明块\n css = css.slice(rbracket + 1).trim()\n }\n\n // 返回JSON形式的结果串\n return json\n}\n\n\n/**\n * 将编辑器内容保存到 LocalStorage\n * @param {*} editor \n * @param {*} name \n */\nexport function saveEditorContent(editor, name) {\n const content = editor.getValue(0)\n\n if (content) {\n localStorage.setItem(name, content)\n } else {\n localStorage.removeItem(name)\n }\n}\n\nexport function isImageIllegal(file) {\n if (!/\\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {\n return '请上传 JPG/PNG/GIF 格式的图片';\n }\n if (file.size > 5 * 1024 * 1024) {\n return '由于公众号限制，图片大小不能超过 5.0M';\n }\n return false;\n}\n\nexport function formatDoc(content) {\n const doc = prettier.format(content, {\n parser: 'markdown',\n plugins: [prettierMarkdown]\n })\n return doc\n}","import juice from 'juice'\n\nexport function solveWeChatImage() {\n const clipboardDiv = document.getElementById('output');\n const images = clipboardDiv.getElementsByTagName(\"img\");\n for (let i = 0; i < images.length; i++) {\n const image = images[i];\n const width = image.getAttribute(\"width\");\n const height = image.getAttribute(\"height\");\n image.removeAttribute(\"width\");\n image.removeAttribute(\"height\");\n image.style.width = width;\n image.style.height = height;\n }\n}\nexport function solveHtml(nightMode = false) {\n const element = document.getElementById(\"output-wrapper\");\n let html = element.innerHTML\n let res = \"\";\n res = juice.inlineContent(\n html,\n {\n inlinePseudoElements: true,\n preserveImportant: true\n }\n );\n return res;\n}","export default {\n builtinFonts: [\n {\n label: '无衬线',\n value: '-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif'\n },\n {\n label: '衬线',\n value: \"Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif\"\n }\n ],\n sizeOption: [\n {\n label: '12px',\n value: '12px',\n desc: '更小'\n },\n {\n label: '13px',\n value: '13px',\n desc: '稍小'\n },\n {\n label: '14px',\n value: '14px',\n desc: '推荐'\n },\n {\n label: '15px',\n value: '15px',\n desc: '稍大'\n },\n {\n label: '16px',\n value: '16px',\n desc: '更大'\n }\n ],\n colorOption: [\n {\n label: '经典蓝',\n value: 'rgba(15, 76, 129, 1)',\n hex: '最新流行'\n },\n {\n label: '翡翠绿',\n value: 'rgba(0, 152, 116, 1)',\n hex: '优雅清新'\n },\n {\n label: '活力橘',\n value: 'rgba(250, 81, 81, 1)',\n hex: '热情活泼'\n }\n ],\n form: {\n rows: 1,\n cols: 1\n }\n};","const DEFAULT_CSS_CONTENT =\n`/*\n 按Ctrl+F可格式化\n*/\n/* 一级标题样式 */\nh1 {\n}\n/* 二级标题样式 */\nh2 {\n}\n/* 三级标题样式 */\nh3 {\n}\n/* 四级标题样式 */\nh4 {\n}\n/* 图片样式 */\nimage {\n}\n/* 引用样式 */\nblockquote {\n}\n/* 引用段落样式 */\nblockquote_p {\n}\n/* 段落样式 */\np {\n}\n/* 行内代码样式 */\ncodespan {\n}\n/* 粗体样式 */\nstrong {\n}\n/* 链接样式 */\nlink {\n}\n/* 微信链接样式 */\nwx_link {\n}\n`\nexport default DEFAULT_CSS_CONTENT\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-dialog',{staticClass:\"reset__dialog\",attrs:{\"title\":\"提示\",\"visible\":_vm.showResetConfirm},on:{\"close\":function($event){return _vm.$emit('close')}}},[_c('div',{staticClass:\"text\"},[_vm._v(\" 此操作将丢失本地缓存的文本和自定义样式，是否继续? \")]),_c('div',{staticClass:\"dialog-footer\",attrs:{\"slot\":\"footer\"},slot:\"footer\"},[_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\"},on:{\"click\":function($event){return _vm.$emit('close')}}},[_vm._v(\"取 消\")]),_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\"},on:{\"click\":function($event){return _vm.$emit('confirm')}}},[_vm._v(\"确 定\")])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n \n
\n Loading...
\n \n \n 此操作将丢失本地缓存的文本和自定义样式，是否继续?\n
\n \n \n
\n 一款高度简洁的微信 Markdown 编辑器
\n\n ![](\"https://imgkr.cn-bj.ufileos.com/09f8e662-42ed-4731-a0d7-419deb74dfb6.png\")
\n
\n \n 扫码关注我的公众号，原创技术文章第一时间推送！
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodemirrorEditor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodemirrorEditor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CodemirrorEditor.vue?vue&type=template&id=66ac7c7c&scoped=true&\"\nimport script from \"./CodemirrorEditor.vue?vue&type=script&lang=js&\"\nexport * from \"./CodemirrorEditor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CodemirrorEditor.vue?vue&type=style&index=0&id=66ac7c7c&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"66ac7c7c\",\n null\n \n)\n\nexport default component.exports","\n \n \n \n
\n \n \n 正在生成\n
\n [${x[0]}]: ${x[1]}`\n }\n return `
[${x[0]}] ${x[1]}: ${x[2]}`\n })\n return `
引用链接
${footnoteArray.join('\\n')}
`\n }\n\n this.buildAddition = () => {\n return `\n \n `\n }\n\n this.setOptions = newOpts => {\n this.opts = merge(this.opts, newOpts)\n }\n\n this.hasFootnotes = () => footnotes.length !== 0\n\n this.getRenderer = (status) => {\n footnotes = []\n footnoteIndex = 0\n\n styleMapping = this.buildTheme(this.opts.theme)\n let renderer = new marked.Renderer()\n\n renderer.heading = (text, level) => {\n switch (level) {\n case 1:\n return `${text}
`\n case 2:\n return `${text}
`\n case 3:\n return `${text}
`\n default:\n return `${text}
`\n }\n }\n renderer.paragraph = text => `${text}
`\n\n renderer.blockquote = text => {\n text = text.replace(/`)\n return `
${text}`\n }\n renderer.code = (text, infoString) => {\n text = text.replace(//g, '>')\n\n let lines = text.split('\\n')\n let codeLines = []\n let numbers = []\n\n for (let i = 0; i < lines.length; i++) {\n const line = lines[i]\n codeLines.push(`
${(line || '
')}`)\n numbers.push('')\n }\n let lang = infoString || ''\n\n return `\n - ${numbers.join('')}
\n ${codeLines.join('')}\n \n ${text}`\n renderer.listitem = text => `<%s/>${text}`\n\n renderer.list = (text, ordered, start) => {\n text = text.replace(/<\\/*p.*?>/g, '')\n let segments = text.split(`<%s/>`)\n if (!ordered) {\n text = segments.join('•')\n return `${text}
`\n }\n text = segments[0]\n for (let i = 1; i < segments.length; i++) {\n text = text + i + '.' + segments[i]\n }\n return `${text}
`\n }\n renderer.image = (href, title, text) => {\n let subText = ''\n if (text) {\n subText = ``\n return renderer\n }\n}\nexport default WxRenderer\n","const DEFAULT_CONTENT =\n`# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\n\n## 使用自动补全\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\n\n\n\n在上图示例中，我们可以看到，输入关键字 \\`juej\\`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\n\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\n\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\n\n## 基于“预测”而非“建议”\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\n\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\n\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 \\`juej\\` 更改为 \\`juex\\` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\n\n\n\n## 为什么看不到某些联想词？\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\n\n- 这个关键字不是热门字词；\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\n\n## 为什么会看到某些不当的联想词？\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\n\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\n\n\n\n## 如何实现自动补全算法？\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\n\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\n\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\n\n### 词汇表实现\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\n\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\n\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 \\`O(log N)\\`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\n\n### 前缀树实现\n通常来说，许多词汇都以相同的前缀开头，比如 \\`need\\`、\\`nested\\` 都以 \\`ne\\` 开头，\\`seed\\`、\\`speed\\` 都以 \\`s\\` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\n\n\n\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\n\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 \\`ne\\` 对应于从子节点取左边缘 \\`N\\` 和唯一边缘 \\`E\\` 的路径。然后可以通过继续遍历从 \\`E\\` 节点可以达到的所有叶节点来生成补全列表。在图中，\\`ne\\` 的补全可以是两个分支：\\`-ed\\` 和 \\`-sted\\`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\n\n### 有限状态自动机(DFA)实现\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 \\`ed\\`、\\`ing\\`、\\`tion\\` 在英文单词中特别常见。在上一个例子中，\\`e\\`、\\`d\\` 分别存放在了每一个分支上。\n\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\n\n
![](\"https://imgkr.cn-bj.ufileos.com/02bc143e-e1a7-4b3c-bd5d-8d6d39139f0a.png\")
![](\"https://imgkr.cn-bj.ufileos.com/1092dc45-e817-4bb0-82b0-2b2b4826ccf2.gif\")
\n\"+a+\"\";\nc=c.firstChild;f&&L(c,f,!0);M({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});return c.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function f(){for(var c=D.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;p