代码高亮 highlight.css

2024-11-09

如何使用 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

给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js

经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗,终于找到了一款非常赞的高亮插件,先来看看效果吧! 1.Javascript 效果 //检测URL function checkeUrl(url){ return new RegExp("^(https|http|ftp|rtsp|mms)://[-a-zA-Z0-9+&@#/%?=~_|!:

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文件

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

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

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

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.在

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的富文本编辑器.做一个富文本编辑器其实没多大意思,网上有

Typecho-Material主题不支持Kotlin代码高亮的解决方案

Typecho-Material主题不支持Kotlin代码高亮的解决方案 Overview 最近通过Typecho搭建了一个Blog,采用了 Material主题,其他的都挺好,也挺喜欢这个主题,但是因为最近一直使用Kotlin语言,但是这个主题却没有Kotlin语言的高亮,这就比较难受了,所以就自己稍微修改了一下. 从highlightjs选择主题 Material 主题采用 hightlight.js 实现代码的高亮,所以我们可以去 https://highlightjs.org/ 下载我们

9个实用的Javascript代码高亮脚本

代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本.这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java.Phyton或Ruby)等写的. 下面来推荐最受欢迎.最实用的9个Javascript代码高亮脚本. 1. SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持多

cnblogs的代码高亮

由于不喜欢cnblogs原来的代码高亮方案,于是自己瞎搞,外加看这位大神的blog以及BZOJ的代码高亮,终于是搞出来了...讲讲怎么弄吧. 当然对于了解css的大神可以无视以下文字…… 其实就是登上SyntaxHighlighter的官网,点一下右边的download和installation,然后照着做,把shCore.js和shCoreDefault.css和shBrush*****.js传上去,然后改一下页首和页脚html代码就可以了.比如我的页首html代码: <!-- Include

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

代码高亮很重要,特别是当我们想要在网站或博客中展示我们的代码的时候.通过在网站或博客中启用代码高亮,读者更方便的读取代码块. 有很多免费而且有用的代码高亮脚本.这些脚本大部分由Javascripts编写,当然也有些使用其它语言(比如Phyton或Ruby)写的. 今天,让我们来看看使用最多的9款Javascript代码高亮脚本吧. 1. SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持很多不同的语言,而且如果你使用的语言不被默认支持,你也可以很简单的创建新"刷子"

HelloDjango 第 09 篇：让博客支持 Markdown 语法和代码高亮

作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写博文.Markdown 是一种 HTML 文本标记语言,只要遵循它约定的语法格式,Markdown 的解析工具就能够把 Markdown 文档转换为标准的 HTML 文档,从而使文章呈现更加丰富的格式,例如标题.列表.代码块等等 HTML 元素.由于 Markdown 语法简单直观,不用超过 5

代码高亮 highlight.css

热门专题