引入ace编辑器用作代码高亮(杀鸡焉用牛刀?
作者:V君 发布于:2020-3-20 22:57 Friday 分类:小服杂记
博客中有不少文章把代码段贴出来,有(dan)空(teng)的时候想办法去弄点样式,没(lan)空的时候就直接贴纯文本。是时候应该解决一下了。那就去看看用什么组件好吧。
(放狗出去找)发现了 highlight.js ,看起来不错,但不支持显示行号,并且作者也不打算实现它。那就再找找吧,(找了一会儿),想起 ace 编辑器了,如果只要设置成只读,它就是一个优秀的代码高亮组件,还能折叠代码块。
废话少说开始干!首先找到代码插入点,这次我选择在 content/templates/default/footer.php 底部的 #wrap 结束标记后面,插入 CDN 库引用然后写了下面的代码来启用。
先TL;DR一下使用方法:在需要高亮的元素上增加以下属性
- highlight="ace" 启用代码高亮
- ace-lang="javascript" 必选,指定代码语言
- ace-theme="chrome" 可选,配色主题
代码语言和配色主题可以参照源代码文件名。
注释掉 log 语句并甩锅给 IE(
//replace nbsp \xa0 to normal space \x20
function normalizeSpaces(elm){
var nodes = elm.childNodes;
for (var i=0; i < nodes.length; ++i){
if(nodes[i].nodeName === "#text") nodes[i].textContent = nodes[i].textContent.split("\xa0").join('\x20');
else normalizeSpaces(nodes[i]);
}
}
if (ace===undefined){
console.log('highlight: ace undefined, no works');
}else{
var items = document.querySelectorAll('[highlight=ace]');
//console.log(`highlight: found ${items.length} element(s) to highlight, dealing with it.`);
for (var i=0;i<items.length;++i){
var item = items[i];
var aceLang=item.getAttribute("ace-lang");
if (aceLang === null){
//console.warn(`highlight: the highlight element #${i} missing attribute 'ace-lang', skipped`);
continue;
}
normalizeSpaces(item);
var aceTheme=item.getAttribute("ace-theme");
if (aceTheme === null) aceTheme = "Chrome";
var editor = ace.edit(item);
editor.setReadOnly(true);
editor.setOptions({maxLines: Infinity});
editor.setTheme("ace/theme/"+aceTheme);
editor.session.setMode("ace/mode/"+aceLang);
editor.setValue( editor.getValue().split('\n').join('\r\n'));
editor.getSession().selection.clearSelection();
}
}
继续水
标签: 软件开发 javascript Web技术
[成功]使EMLOG支持PHP7和MYSQLi数据库连接方式
作者:V君 发布于:2019-4-8 0:47 Monday 分类:折腾手记
TL;DR
1) 定位到 $/include/lib/mysql.php 把里面的 mysql_xxx 系列方法名改成 mysqli_xxx 系列,并按照方法签名修改传入的参数,主要是顺序和连接实例,可以参考采鸟教程
2)定位到 $/include/lib/cache.php 把里面的
$$row['option_name'] = $row['option_value']; 改为
${$row['option_name']} = $row['option_value'];
目前就发现这两处,修改完之后貌似已经能继续工作。如果还有别的问题,可以持续观察apache的错误日志,继续找出要修改的地方。
扯扯:
安装Gogs时似乎因为系统软件包太旧没装上,作死轻易升级系统,还肆意跳过一些步骤,结果把服务器搞崩了。。。
重装最新版系统,灌软件包的时候发现EMLOG需要的PHP5没了,只能装7,装上之后遇到一系列数据库连接问题,还好在短时间内一边咕狗一边修改,给搞定了!
这回又折腾了一把所谓最好的编程语言,想不碰都难呀 XD
看来把时间分一些到目前一直在咕咕咕的个人博客系统了 乂目
写了个小脚本去调整咕狗搜索结果
作者:V君 发布于:2018-12-18 12:06 Tuesday 分类:我的应用
获取: greasyfork
效果: 在咕狗搜索结果页,针对搜索结果条目,按配置将其标记后淡化及移到底部处理
用法: 安装后无需进一步配置即可按默认规则执行
限制: 目前还没实现界面, 域名配置硬编码在脚本中.
目前仅实现了网页条目的处理, 对图片和视频不起作用
环境: 用了ES6语法, 需要较新版本浏览器支持
吐槽时间:
早些年,咕狗提供了内置于网页的过滤列表.
近些年,咕狗似乎是为了推广自己的浏览器,移除了内置的过滤列表改成chrome扩展.
这些年,chrome经过飞快地版本迭代,不断提升安全性,似乎把搜索结果过滤扩展挡住了...
尽管有许多第三方实现,懒得去摸索,但还是自己搞吧.
于是写几行脚本这玩意儿就出来了.手上有锤子,什么问题都是钉子,哪里不爽锤哪里!
标签: 谷歌 javascript Chrome 用户脚本 Web技术
【更新】玩了一把Bridge.NET,手感不错
作者:V君 发布于:2018-9-24 9:32 Monday 分类:折腾手记
这次不是解决具体问题,TLDR就不存在了,直接开始扯。
让B/S开发不用把精力浪费在js这种过分动态的弱类型语言上。
比起TS,还是能直接写C#更舒服。
接触Bridge.NET之前了解过Script#、JSIL、WootzJs之类的玩意儿,遗憾的是它们都不好使。
主要体现在元数据(反射)和三方库绑定(类型导入)上,直到发现了这货,
这两个问题已经得到基本上的解决,只是有些小毛病有点让人不爽。
搞B/S要对组成页面的三大要点DOM、样式、脚本,为啥不是HTML、CSS、JavaScript?
因为通过脚本可以控制前两者,嫌设置样式麻烦还有scss之类的预处理器,
手写原生代码时代已经一去不复返。
在Bridge.NET有一个名为Retyped的类型定义仓库,本文撰写时已收录3600+个常用Web类库。
不但三方库类型定义齐全,H5/DOM API也很完备,可以不管HTML直接用代码来撸DOM。
说完Web基础功能之后当然就是JS和TS做不到的运行时元数据啦!
Bridge.NET带有完整的元数据,我们可以尽情地使用各种Attribute和类型反射
顺便贴一下练手过程的副产物:
前端路由:基于历史API造了个带拦截的前端路由轮子玩,用了Attribute和反射,手感不错
热更新(伪):每次调试生成后写入时间戳文件,轮询,检测到差异就刷新页面
Lodash:Retyped的类型定义库会造成编译失败略不爽,反正也只用到debounce,就自己撸了
Ace编辑器:类型定义用着还不错,【更新】虽然目前似乎没有同步到原来的类库定义,但可以在初始化之前来个workaround补丁脚本。
体验报告到此结束,接下来不用纠结选VUE还是这玩意了,博客系统的管理界面前端就用它吧!
标签: 软件开发 javascript C# Web技术
吐吐苦水: 收集一些老项目中不合理的设计与编码,给后来开发人员添麻烦的例子
作者:V君 发布于:2018-9-9 2:11 Sunday 分类:填坑经验
从17年下半年开始收集,内容不多就先不放出来占条目
供引以为戒
1) 返回值是集合的方法,查询无结果时返回null
调用者必须繁琐地检查空引用
应参考Linq的ToArray, 在无结果时返回元素个数为0的集合实例
2) 对于WEB请求无论报错还是无结果,返回空字符串,尽管把错误写入日志
无法从浏览器前端直接得知是查询无结果还是服务端报错
应当在无查询结果时返回空集合实例, 在服务端报错时返回经过筛选的友好提示
3) RouterMapping.config
在一个相当老的项目中, 出现把所有MVC中Controller的Action全都定义到配置文件的现象,
这和早些年Java的SSH一个鸟养哇!
由于发布版本一般会排除配置文件,因为开发环境和正式环境不同,于是经常出现莫名其妙的Action丢失或404的扯蛋现象。或许是那时候使用的技术过于老旧
4) 二进制协议解析,变长数据,长度敏感
在协议中已明确变长的数据段中使用特定长度区分报文内容,
若厂商在日后扩充了协议(即长度变更)将会无法正确解析数据。
我们应该严谨的遵循协议文档实现解析,
遍历所有出现的数据段,只捡出需要内容,以便向后兼容。
5) (UintFlaggedEnum)int.Parse(dataReader["UintColumn"].ToString())
这真是2008年左右前刚毕业的人写的代码的味道.
在第31个bit被使用之前,这段代码是好用的, 一旦bit31被使用即爆炸.
在不能用ORM的时候我们应该使用一致的数据类型。
现在可以用Dapper之类的轻量级ORM代替手动邦定数据。
blogger
咕狗网页翻译
热门日志
随机日志
最新日志
最新评论
- preferences
解决了,谢谢博... - V君
@eses:凑合能用... - eses
无盘系统弄完了... - 逐浪发哥
不错可以用。 - Ninokz
妙啊 - V君
@もるにゃう:可... - もるにゃう
似乎在WIN10 2004版... - V君
@Raymond:hahaha - Raymond
今天网易日推到... - V君
@Ninokz:手动点赞...
分类
存档
- 2020年12月(1)
- 2020年11月(1)
- 2020年10月(2)
- 2020年9月(1)
- 2020年8月(1)
- 2020年7月(1)
- 2020年6月(1)
- 2020年5月(1)
- 2020年4月(2)
- 2020年3月(3)
- 2020年2月(1)
- 2020年1月(1)
- 2019年12月(1)
- 2019年11月(1)
- 2019年10月(1)
- 2019年9月(1)
- 2019年8月(2)
- 2019年7月(1)
- 2019年6月(1)
- 2019年5月(1)
- 2019年4月(1)
- 2019年3月(1)
- 2019年2月(1)
- 2019年1月(2)
- 2018年12月(2)
- 2018年11月(1)
- 2018年10月(3)
- 2018年9月(4)
- 2018年8月(6)
- 2018年7月(4)
- 2018年6月(1)
- 2018年5月(2)
- 2018年4月(2)
- 2018年3月(3)
- 2018年2月(1)
- 2018年1月(1)
- 2017年12月(1)
- 2017年10月(2)
- 2017年9月(1)
- 2017年8月(2)
- 2017年7月(1)
- 2017年6月(5)
- 2017年5月(2)
- 2017年4月(2)
- 2017年3月(3)
- 2017年2月(2)
- 2017年1月(2)
- 2016年12月(3)
- 2016年11月(2)
- 2016年10月(3)
- 2016年9月(4)
- 2016年8月(2)
- 2016年7月(4)
- 2016年6月(3)
- 2016年5月(1)
- 2016年4月(4)
- 2016年3月(3)
- 2016年2月(1)
- 2016年1月(5)
- 2015年12月(4)
- 2015年11月(5)
- 2015年10月(1)
- 2015年9月(6)
- 2015年8月(4)
- 2015年7月(1)
- 2015年6月(6)
- 2015年5月(3)
- 2015年4月(3)
- 2015年3月(2)
- 2015年2月(1)
- 2015年1月(3)
- 2014年12月(1)
- 2014年11月(1)
- 2014年10月(1)
- 2014年9月(3)
- 2014年8月(1)
- 2014年7月(1)
- 2014年6月(1)
- 2014年5月(3)
- 2014年4月(1)
- 2014年3月(1)
- 2014年2月(2)
- 2014年1月(1)
- 2013年12月(2)
- 2013年11月(2)
- 2013年10月(1)
- 2013年9月(3)
- 2013年8月(14)
- 2013年7月(7)
- 2013年4月(1)
- 2013年3月(4)
- 2013年2月(6)
- 2013年1月(6)
- 2012年12月(8)
- 2012年11月(6)