在用《有道云笔记》等软件时候,软件自身不提供代码高亮功能,对于需要记录code的学习笔记,视觉效果丢失。

有很多在线工具能用来代码高亮,比如oschina就有代码高亮页面用于着色。

但是我想要sublime里那种效果,有没有方法做到?

应该已经有人开发过这种插件了吧:代码高亮,主题选取,甚至字体、行号......各种js插件?

为了练手我自己手用python写了一个web app用来代码高亮:服务端用pygments进行语法解析,前端用pygments生成的颜色主题css进行配色。当然完全用pygments在本地做着色没有问题,但是我记不住命令,还是网页上的工具用起来交互体验更好些~因为我想要的是直观的显示效果~

使用web.py框架进行简单的http请求hanler,前端稍微用DOM操作了下实现字体、字体大小、代码颜色主题的选取。

写好后发到github上了,repo地址,演示地址

P.S. 还有很多地方没有完善,比如代码描述、行号显示、作者、代码复制、html下载、分享给朋友......各种功能都可以添加。如果你有想法,欢迎fork并contribute~

Hilite代码高亮工具的更多相关文章

  1. Windows Live Writer教程及代码高亮工具

    十分感谢六仙庵对于Windows Live Writer的教程,方便了编辑与发布,教程地址如下: http://www.cnblogs.com/liuxianan/archive/2013/04/13 ...

  2. 九款常用的JS代码高亮工具

    代码高亮很重要,特别是当我们想要在网站或博客中展示我们的代码的时候.通过在网站或博客中启用代码高亮,读者更方便的读取代码块. 有很多免费而且有用的代码高亮脚本.这些脚本大部分由Javascripts编 ...

  3. [原创]-[WEB]代码高亮工具

    代码高亮显示,不是什么新鲜玩艺了,各种各样的插件多了去了.       一开始想在baidu空间里贴代码,用GeSHi生成的高亮HTML复制到编辑器就可以了,不过QQ空间却不行,复制过去的格式全部被清 ...

  4. javascript实现代码高亮

    javascript实现代码高亮-wangHighLighter.js 1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfup ...

  5. javascript实现代码高亮-wangHighLighter.js

    1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新 ...

  6. Google的代码高亮-code-prettify

    前不久发现,在wordpress中贴代码的时候,发现code标签并没有意料中的好使用,在贴代码的时候没有高亮真的是一件无法忍受的事情. 正巧,两周前听过同事Eason的一个关于Markdown的分享, ...

  7. django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务

    上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...

  8. 置Hugo的代码高亮

    +++ date="2020-10-17" title="设置Hugo的代码高亮" tags=["hugo"] categories=[&q ...

  9. chrome79开发者工具代码高亮失效的解决办法

    升级chrome最新版本后,存在开发者工具Sources内代码高亮失效的情况 解决办法: 1. 开发者工具面板右上角菜单->Setting->Preferences 2. 将Theme切换 ...

随机推荐

  1. 【bzoj4559】成绩比较

    Portal -->bzoj4559 补档计划 ​  借这题补个档--拉格朗日插值 ​​  插值的话大概就是有一个\(n-1\)次多项式\(A(x)\),你只知道它在\(n\)处的点值,分别是\ ...

  2. UESTC--1655

    原题链接:http://acm.uestc.edu.cn/problem.php?pid=1655 分析:注意可能会反向. #include<iostream> #include<c ...

  3. 安装好dashboard 登录出现错误

    验证发生错误.请稍后再试一次. While turning SELinux off certainly does the trick, it is somewhat like using a sled ...

  4. 1.5 Scipy:高级科学计算

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...

  5. 基于packstack的openstack单节点安装

    一.安装源处理 1.更新base源为网易的源 cd /etc/yum.repos.d/ wget http://mirrors.163.com/.help/CentOS6-Base-163.repo ...

  6. python---Scrapy模块的使用(一)

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中. Scrapy 使用了 Twisted异步网络库来处理网络通讯.整体 ...

  7. 搜索:DLX算法

    精确覆盖问题:在一个0-1矩阵中,选定部分行,使得每一列都有且只有一个1.求解一种选法 舞蹈链(Dance Link),也就是一个循环十字链表,可以快速的删掉和恢复某行某列 结合了舞蹈链的搜索就称作D ...

  8. [译]Quartz.Net 框架 教程(中文版)2.2.x 之第三课 更多关于Jobs和JobDetails

    第三课 更多关于Jobs和JobDetails 在这二课我们已经学习到,Jobs接口非常容易实现,只有一个execute方法.我们需要再学习一些知识去理解jobs的本质,Job接口的execute方法 ...

  9. 集合框架小结-Collection

    1.集合框架作为处理对象的容器存在,基本接口是Collection,相对于数组而言的话,集合框架只能存储对象,但是长度是可变的.集合框架的关系图如下: 主要的内容是list.set.map, List ...

  10. thinkphp表单验证

    之前的表单验证都是用js写的,这里也可以使用tp框架的验证.但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度和效率就会下降. 自动验证是ThinkPHP模型层提供的一种 ...