highlight代码高亮

如何使用 highlight.js 高亮代码

highlight 是一款简单易用的 web 代码高亮插件,可以自动检测编程语言并高亮,兼容各种框架,可以说是十分强大了.下面就简单介绍一下如何使用这款插件. 两种使用方式: 1. 手动选择主题,官网下载highlight 库文件,并在页面中分别引用 js 和 css 文件. 2. 使用 cdn 链接. 为了简单方便,这里使用第二种方法. cdn 地址:http://www.bootcdn.cn highlight cdn: https://cdn.bootcss.com/highlight.j

highlight.js 代码高亮插件

官网:https://highlightjs.org/ API:http://highlightjs.readthedocs.org/en/latest/api.html 1. 简单使用: <link rel="stylesheet" href="/path/to/styles/default.css"> <script src="/path/to/highlight.pack.js"></script> &l

使用highlight.js高亮你的代码

在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉. 开始了正式的捣鼓. 在捣鼓之前去别的网站看了看.这里贴上简书的效果: 其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去.于是去看了看document,发现是这样的: <pre class="hljs javascript">

highlight.js 代码高亮插件的使用

在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压. 在解压后

【highlight.js】页面代码高亮插件

[highlight.js] 很多博客都支持页面插入各种语言的代码,而这些代码肯定是有高亮设置的.那么在我们自己的页面上如何进行代码高亮设置?有现成的这个highlight.js插件我们可以使用. highlight.js的官网是[https://highlightjs.org/]可以去上面下载插件.如果习惯用cdn可以百度一下怎么用cdn的方法来引用相关文件,我这里就把这个包下载到本地来了. ■ 简单用法简单的用法我们主要用到了highlight/highligh.pack.js这个js文件

【blog】使用highlight.js高亮你的代码

我的代码  <link rel="stylesheet" type="text/css" href="/web/lib/highlight/styles/atelier-dune-dark.css"> <script type="text/javascript" src="/web/lib/highlight/highlight.pack.js">

Ghost本地安装highlight.js使代码高亮

对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行安装,非常easy. 下载highlight.js 下载地址本来已经包括了非常多支持的高亮语言,假设上面没找到你要的语言,能够在以下继续勾选.最后点击下方的下载. 解压安装highlight.js 解压highlight.js到Ghost本地的主题目录以下的资源目录.我这里是: 安装highli

如何在博客中使用SublimeText风格的代码高亮样式

因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式. 虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努力.近来有网友问及如何实现,现分享出来,看完本文后你也可以把自己博客的代码整得漂亮些,让别人看着舒服些了. 方法其实是很麻烦的,即使是写了好几篇博客了对这个过程我已经娴熟了,但其实也还是挻麻烦的.不过谁叫我有是个偏执狂呢,为了让页面漂亮我愿麻烦自己,舒服大家.如果你有更好的方法那当然更好. 安装su

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn

轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQuery Litelighter</title> <style> body{background: #FAF9F4;}#wrapper h1{ color: #000; letter-spacing: 2px; font-size: 30px;}#wrapper h2{ color:

新语言代码高亮及Windows Live Writer插件开发

最近在博客园做一些学习笔记.一个是看apple的swift官方书,另外一个是随学校课堂(SICP)学习scheme. 这两种语言都谈不上普及(或者说swift太新).博客园原来的windows live writer代码高亮插件并不适用于这些语言. 于是我只好自己想办法.首先我找到了highlight.js这个js高亮插件.搜索到其官网.按照步骤部署在博客园即可. 需要注意的是,博客园我目前还没有发现如何添加外链. 从highlightjs下载的css和js都没有地方上传.所以我直接选择暴力将其

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

如何使用SublimeText风格的代码高亮样式添加Zed Coding（EMMET）插件

因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式. 虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努力.近来有网友问及如何实现,现分享出来,看完本文后你也可以把自己博客的代码整得漂亮些,让别人看着舒服些了. 方法其实是很麻烦的,即使是写了好几篇博客了对这个过程我已经娴熟了,但其实也还是挻麻烦的.不过谁叫我有是个偏执狂呢,为了让页面漂亮我愿麻烦自己,舒服大家.如果你有更好的方法那当然更好. 安装su

javascript实现代码高亮

javascript实现代码高亮-wangHighLighter.js 1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新,都参见该网址为准) 可能有朋友关注过我的wangEditor——基于bootstrap的富文本编辑器.做一个富文本编辑器其实没多大意思,网上有的是编辑器插件.但是带插入代码并且支持代码高亮的富文本编辑器就不多见了.这是其一.

为Ghost博客扩展代码高亮、数学公式、页面统计、评论

前几天捣鼓了一下博客首页,接下来再丰富一下博客页面的功能与内容.由于我所使用的Ghost博客专注于轻量简洁,因此标题中提到的功能在Ghost中默认均不支持.下面将逐个介绍一下如何为Ghost扩展这些功能. 代码高亮代码高亮的方案很多,我在Hexo的某个主题上注意到了highlight.js这个插件. 这个插件默认支持23中主流编程语言以及100多种代码高亮主题,基本满足你的需求.还不满意?你可以在官网选择你希望支持的编程语言进行定制. 我使用官网介绍的CDN方式嵌入highlight.js.在

Python IDLE 代码高亮主题

Python IDLE 代码高亮主题使用方法: 打开C盘我的 C:\Documents and Settings\你的用户名.idlerc文件夹里面会有一个 config-highlight.cfg 如果没有请自已创建一个将下面的代码放到 config-highlight.cfg 里面,并重启IDLE 这下在IDLE的设置highlight项里面就有几个主题了首先要找到名为config-highlight.cfg的文件,这个文件位于哪里呢?我列了一份可以找到它的路径清单在Linux系列

github pages代码高亮highlighter

github pages 一直想添加代码高亮 highlighter ,基于 jekyll 3.0 的 rouge 终于搞定了: 下载代码高亮库在 cmd 中输入: rougify style monokai.sublime > rouge.css 可以下载 rouge.css 出来,将这个 css 文件放到 github pages 项目中存放 css 的目录下,并在 html 中引用这个库,请自行更改引用的路径: <link href="/static/css/rouge.cs

blogger添加代码高亮

blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的窗口右上角搜索(search)</head>,然后在</head>之前添加如下代码:  <link href='//cdn.bootcss.com/highlight.js/9.12.0/sty

使用highlightjs自定义markdown代码高亮

目录概述实现方法概述最近使用markdown来写一些技术文档和博客,觉得真心不错,这才是程序员该用的编辑器嘛~~ Mou在mac上的 markdown 编辑器,很简约,可惜Mou好像只支持标准的 markdown 语法,不支持 markdown Extra ,比如``生成目录和代码高亮等,所以才有了本文. highlight.js是一个github上的代码高亮插件,支持大多数的语言,能自动识别语言,还可以随意切换不同的代码块样式. highlight.js 的guihub地址:https

javascript实现代码高亮-wangHighLighter.js

1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新,都参见该网址为准) wangHighLighter demo演示地址:http://www.cnblogs.com/wangfupeng1988/p/4192911.html 可能有朋友关注过我的wangEditor——基于bootstrap的富文本编辑器.做一个富文本编辑器其实没多大意思,网上有

highlight代码高亮

热门专题