Foxtable(狐表)用户栏目专家坐堂 → [免费开源]狐表cs集成代码高亮Highlight.js,代码编辑器,代码着色,毫秒级响应。你还在用黑白的文本框阅读后端web代码吗?来试试这个


  共有12461人关注过本帖平板打印复制链接

主题:[免费开源]狐表cs集成代码高亮Highlight.js,代码编辑器,代码着色,毫秒级响应。你还在用黑白的文本框阅读后端web代码吗?来试试这个

帅哥哟,离线,有人找我吗?
chen37280600
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:六尾狐 帖子:1264 积分:7827 威望:0 精华:4 注册:2017/12/31 14:53:00
[免费开源]狐表cs集成代码高亮Highlight.js,代码编辑器,代码着色,毫秒级响应。你还在用黑白的文本框阅读后端web代码吗?来试试这个  发帖心情 Post By:2020/12/28 22:12:00 [只看该作者]

2022.5.27更新
之前的Highlight.js只能查看不能编辑,现在找了个新的高亮工具,支持编辑用起来也更简单,建议用这个



此主题相关图片如下:1.png
按此在新窗口浏览图片

-(以下是旧内容)----------------------------------------------------------------------------

先看效果

按此在新窗口浏览图片

一、集成这个玩意的原因:

相信很多在做狐表B/S前后端分离的朋友,大部分时候写代码在狐表编辑器,写完就粘贴回去文本框里,最后动态编译。
只是有bug要小调试时,一般为了方便快捷,都是直接阅读黑白的文本框,不是很爽。

如果能有vs或者sublimeText3的代码着色就好了。

但是很遗憾,这种能读写的编辑器,真是很难做,网上也没有好开源轮子。
或者有人用富文本框花大力气做出来,但是代码一多,渲染效率低下,使用
或者有人把代码复制出去到了第三方的编辑器,改完又复制回来,大改代码倒是没所谓。小改小修的话,实在是烦,还不如直接读黑白代码。

不过我找到了一个折中的方案。就是用Highlight.js这个专门用于代码高亮js库,融合进去狐表,实现代码着色。
虽然是只读的,但是也足够我阅读代码,快速定位小bug,然后切换到文本框模式,改好

二、Demo效果图:


此主题相关图片如下:2.png
按此在新窗口浏览图片


此主题相关图片如下:1.png
按此在新窗口浏览图片


三、教程:
1该js需要ie9或以上的版本。
win10和win2012或以上都是自带高于ie9的内核。而win7则需要自行先升级好ie,推荐直接一步到位装ie11.

2解压附件到Attachments里
 下载信息  [文件大小:   下载次数: ]
点击浏览该文件:attachments.zip


此主题相关图片如下:3.png
按此在新窗口浏览图片

3用管理员模式打开狐表
发布后的程序也要用管理员模式打开,因为待会要去修改注册表,把狐表默认引用的IE内核改为IE9,需要足够的权限。
不过你做BS程序,狐表本来也要求在管理员模式打开,否则HttpServer启动不了

4窗口Afterload代码

Try
    '提升为IE9内核,需要管理员权限
    Registry.SetValue("HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION",System.Diagnostics.Process.GetCurrentProcess.ProcessName & ".exe",9999)
Catch ex As Exception
    MessageBox.Show("无法提升IE9内核,请用管理员模式运行" )
End Try

5把文本框写入到高亮网页并展示的按钮代码


以下内容只有回复后才可以浏览


此主题相关图片如下:1.png
按此在新窗口浏览图片

6完整Demo下载(要求狐表20200529版本)

以下内容只有回复后才可以浏览

四、常见问题:

1为什么是只读,不能做到读写?成为一个真正的代码编辑器
答:有2个原因:
一是因为这个是js领域的东西,js要返回数据到狐表,狐表要启动Http服务器,为了一个着色启动服务,太傻了。
二是因为Highlight.js,本身定位就是做一个代码着色渲染,并没有做编辑功能。它着色的原理,是根据规则,帮你把代码分割,然后对关键词都增加html的颜色标签,你肉眼看到它代码没啥变化,只是颜色变了,但是本质源码里,它早就被加插了一堆杂鱼字符,读不了的啦。

此主题相关图片如下:4.png
按此在新窗口浏览图片

2代码只能看,如果要改,怎么办?怎么才方便?
答:修改代码还是用文本框,我们做个tab快速切换文本框和高亮代码框就好了。类似我的用法:

此主题相关图片如下:5.png
按此在新窗口浏览图片

毕竟代码要大改的情况下,我们肯定开狐表编辑器最方便。利用里面的精灵提示,还有自己的快捷代码,快速编写
而代码小修小改的情况下,这种方便阅读的代码着色,就很好用了,少了个标点符号,都可能颜色面目全非,快速找到问题

3如何修改主题颜色?
答:highlight提供了100种主题颜色,其中vs.css和monokai-sublime.css是最常见的主题,这些主题都在styles文件夹里

此主题相关图片如下:6.png
按此在新窗口浏览图片

例如现在我们改一个atom-one-dark.css的主题试试。打开Model.html,修改

此主题相关图片如下:7.png
按此在新窗口浏览图片

效果:

此主题相关图片如下:8.png
按此在新窗口浏览图片

===============================================================
顺便总结以前分享过的帖子,方便大家学习

联系QQ:2385350359

免费产品:

经验分享:




















[此贴子已经被作者于2022/5/29 10:26:05编辑过]

 回到顶部
总数 32 1 2 3 4 下一页