zoukankan      html  css  js  c++  java
  • SyntaxHighlighter源代码研究

    这么多天没有动我的博客……还不是因为寒假作业没写好。居然都过去了一个星期,想想也应该要写点什么了

    寒假开始写作业前几天,我一直在研究SyntaxHighlighter的源代码。经历大概有所记录下来,不过绝大部分时候都太认真了而忘记了记录,然后以我的连上一秒干了什么都会瞬间忘记的记忆力,我也不奢望自己能够想起来什么了,所以也就拿自己那个不完整的记录来忽悠一下好了。

    貌似没有找过画流程图的代码啊,想要分析源代码果然还是需要流程图方便很多呢

    另外装一个逼:我在打算看这段源代码之前是不会JavaScript的,特地为了它去研究了一个晚上的JavaScript(到时候也会发一下经历的啦,虽然没有写什么记录)

    下面开始。。。

    我不知道有多少人和我一样...
    在Syntax Highlighter官网下载来的文件,
    解压后发现一个src文件夹,
    愉快地点了进去,
    发现有一个shCore.js文件,
    然后就愉快的加到页面HTML源码里去了,
    然后就纠结为什么不起作用折腾了一天,
    直到我发现里面还有一个index.html样例(我本来以为它是指向SH首页的...).

    和我一样的请举手...

    ————————————————————————————————————————

    在最基础的搞好之后, 我试图研究scripeshCore.js
    然后第一眼就放弃了(不要问我为什么...自己打开看就知道了)
    当然, 最后会回来再看看的, 等我先搞出自己的主题再说

    接下去坑了好久: 找到CSS里所有类所对应的一类文字
    比如gutter表示的是左侧的行号, lighted指的是高亮的那行 等等
    其实就是改一下background-color就可以了...但是有些找不到比如printing
    这些东西我都已经在shCore.css加了注释了, 有时间整理一下我会发到blog上的
    当然如果有人发现一些错误或者知道那些我没有搞懂的东西欢迎留言指出

    在Github上发现3.9版本但是好像不能用(或者是我不会用)

    艹差点毁了我所有的成果, 吓死了

    再PS下,在看它的源代码之前我是不会正则表达式的,花了不少时间去学习...

    JS的正则表达式居然不能零宽度正回顾后发断言和零宽度负回顾后发断言
    那很多我想实现的功能都做不到了...
    那就索性放弃这些特性好了, 因为要实现的话也很复杂, 以后再说

    然后去掉了右上角的toolbar和右侧的滚动条
    不过方法很简单, 在css里加上一句
    display: none !important;
    即可
    右侧的滚条感觉是个bug, 索性去掉好了
    在css里加上一句
    .syntaxhighlighter table{margin-buttom:1px!important;}
    即可

    接下来是一些小小的颜色搭配啦(最讨厌UI设计了...)
    然后搞了一个小小的阴影...
    设计大概没问题了, 其实如果JavaScipt的正则表达式更强大
    能实现的功能就跟多了...

    ————————————————————————————————————————
    上午看了半天的动漫...作业还没写好呢..., 开始研究shCore.js...

    首先我现在用的是SyntaxHighlighter 3.0.9的shCore.js
    按照介绍, 是要用到XRegExp的xregex.js, 之前没有看过介绍, 于是用不了
    恐怕第一天研究了半天的src文件夹里面的才是真正的3.0.9源码...
    3.0.9的shCore.js亲民多了, 终于可以仔细研究放肆修改了...

    注: JavaScript加到HTML的时候是有先后顺序的, 要注意两个文件之间的逻辑关系

    shCore.js里面自定义部分我已经加了注释, 专门为英语渣提供服务...
    可以在shCore.js里面直接取消toolbar和左侧的行号了, 更人性化

    貌似想要研究透还得学习一下那个xregex.js...不过现在还完全可以看得下去

    很多都差不多了...

    几乎完全看懂了...注释了很多(对我而言)没用的代码...不知道该不该删掉...

    ————————————————————————————————————————
    修改了一个小bug, 无法自动删除最后的空行的小bug

    增加了数字高亮, 修正一个安全性bug

    增加了运算符高亮

    本来想搞一下自定函数、类、宏高亮的不过貌似作业来不及了...

    ————————————————————————————————————————

    以上是记录,略有修改(很不完整),有时间一定会搞一个流程图的

    最后发现博客园有内置的SyntaxHighlighter,这样的话。。。两个SyntaxHighlighter会冲突的吧。所以自己的就用不了了,辛苦添加了这么多功能都白费了。对于懒得自己搞SyntaxHighlighter的人来说自带SH方便了,不过对那些愿意自定义的人来说却反而麻烦了,虽然可以把整个类名改一下(关联的当然也要改啦)可是有谁会这么闲呢...

    以后再说,我还要学新算法。。。(好吧是数据结构)

  • 相关阅读:
    Python标准模块--concurrent.futures 进程池线程池终极用法
    线程,线程池
    常用英文单词
    进程池
    三种方法实现 生产者消费者模型
    进程间通信IPC -- 管道, 队列
    jquery 和 css 属性
    javascript的 Object 和 Function
    nodejs 返回html页面--使用 ejs 模板
    jquery属性
  • 原文地址:https://www.cnblogs.com/johnsonyip/p/4320259.html
Copyright © 2011-2022 走看看