大家好，今天给各位分享图文教程网站源码分享的一些知识，其中也会对制图网站源码进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
有些在线图文编辑器不支持直接插入代码块，但可以直接粘贴HTML格式的高亮代码块。
花了一点时间研究了一下各家的编辑器，规则却各不相同。有的要求代码块被包含于<code>…</code>或者<pre><code>…</code></pre>,有些要求class属性里包含&34;关键词，或者要求代码块里必须包含至少一个<br>。如果不符合这些要求，不是变成普通文本，就是丢失换行缩进，或者丢失颜色样式。
所以，这就难了。先得找个支持代码高亮的编辑器，仔细地选择并复制代码块，复制完还得编辑剪贴板里的HTML。这就不如干脆写个转换工具了。
因为浏览器操作系统剪贴板可能不太方便，下面用aardio写一个工具软件。
先看软件成品演示：
软件用法：
1、输入编程语言名称（支持自动完成）。
2、然后在输入框中粘贴要转换的编程代码。
3、点击「复制高亮代码块」按钮。
然后我们就可以打开在线图文编辑器直接粘贴生成的高亮代码块了。
下面是这个软件的aardio源代码：
importwin.ui;\n/*DSG{{*/\nvarwinform=win.form(text=&34;;right=1055;bottom=674;bgcolor=16777215)\nwinform.add(\nbutton={cls=&34;;text=&34;;left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note=&34;;z=4};\ncmbLangs={cls=&34;;left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={&34;};mode=&34;;z=2};\neditCode={cls=&34;;left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};\nstatic={cls=&34;;text=&34;;left=70;top=629;right=248;bottom=649;align=&34;;db=1;dl=1;transparent=1;z=3};\nwebCtrl={cls=&34;;text=&34;;left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}\n)\n/*}}*/\n\nimportweb.view;\nvarwb=web.view(winform.webCtrl);\n\nimportwin.clip.html;\nwb.export({\nonHighlight=function(html,background,foreground){\nhtml=`<preclass=&34;style=&34;Consolas&34;LiberationMono&34;><code>`\n+html+`</code></pre>`;\n\nhtml,count=string.replace(html,&39;,&34;);\nif(!count){\nhtml=string.replace(html,`\\</code\\>\\</pre\\>$`,`<br></code></pre>`);\n}\nvarcb=win.clip.html();\ncb.write(html);\n\nwinform.setTimeout(\nfunction(){\nwinform.editCode.show(true);\nwinform.webCtrl.show(false);\nwinform.text=&34;;\n},1000);\n};\nsetLanguages=function(langs){\nwinform.languages=langs;\n}\n})\n\n\nwinform.cmbLangs.onEditChange=function(){\n\nvartext=string.lower(winform.cmbLangs.text);\nvaritems=table.filter(winform.languages:{},lambda(v)string.startWith(v,text));\nwinform.cmbLangs.autoComplete(items);\n}\nwinform.cmbLangs.editBox.disableInputMethod();\n\nimportweb.prism;\nimportwsock.tcp.asynHttpServer;\nvarhttpServer=wsock.tcp.asynHttpServer();\nhttpServer.run(web.prism,{\n[&34;]=/*****\n<!DOCTYPEhtml>\n<html>\n<head>\n<metacharset=&34;/>\n<linkhref=&34;rel=&34;/>\n</head>\n<body>\n<preid=&34;><codeid=&34;class=&34;></code></pre>\n<scriptsrc=&34;></script>\n<script>\nfunctioncomputedColorStyle(element,options={}){\n\nArray.prototype.forEach.call(element.children,child=>{\ncomputedColorStyle(child,options);\n});\n\nconstcomputedStyle=getComputedStyle(element);\nelement.style[&34;]=computedStyle.getPropertyValue(&34;);\n}\n\nhighlight=function(code,language){\nvarhtml=Prism.highlight(code,Prism.languages[language],language);\n\nvarcodeEle=document.getElementById(&34;);\ncodeEle.innerHTML=html;\ncomputedColorStyle(codeEle);\n\nconstcomputedStyle=getComputedStyle(codeEle);\nonHighlight(codeEle.innerHTML\n,getComputedStyle(document.getElementById(&34;)).getPropertyValue(&34;)\n,computedStyle.getPropertyValue(&34;));\n}\n\nsetLanguages(Object.keys(Prism.languages));\n</script>\n</body>\n</html>\n*****/\n});\n\nwb.go(httpServer.getUrl(&34;));\n\nwinform.button.oncommand=function(id,event){\nwinform.text=&34;\nwinform.editCode.show(false);\nwinform.webCtrl.show(true);\n\nwb.xcall(&34;,winform.editCode.text,winform.cmbLangs.text);\n}\n\n\nwinform.show();\nwin.loopMessage();
打开aardio创建工程，然后复制粘贴上面的代码到main.aardio里面就可以直接运行，或生成独立EXE文件：
这个软件的原理：
1、首先通过WebView2调用Prism.js高亮代码。为了可以内存加载Prism.js（支持生成独立EXE），我写了一个aardio扩展库web.prism。关于WebView2请参考：放弃Electron，拥抱WebView2！JavaScript快速开发独立EXE程序
2、因为Prism.js生成的HTML代码块都是使用class属性指定样式，所以我们需要调用getComputedStyle获取最终渲染的字体颜色属性。
3、最后在JavaScript里调用aardio函数处理生成的HTML代码块，aardio的任务是将HTML修改为更合适直接粘贴的格式，并尽可能地处理各图文编辑器的兼容问题。然后调用win.clip.html将处理好的HTML复制到系统剪贴板：
importwin.clip.html;\n\nvarcb=win.clip.html();\ncb.write(html);
然后只要愉快地粘贴代码块就可以。
如果是aardio代码不需要用这个工具，在aardio编辑器里右键直接点『复制全部到HTML代码块』就可以了：
OK，关于图文教程网站源码分享和制图网站源码的内容到此结束了，希望对大家有所帮助。