highlight.js 页面代码高亮

官网：https://highlightjs.org/

功能：

支持 155 种编程语言的语法解析；拥有 73 种样式

　　　　自动检测编程语言

　　　　可以在 node.js 平台上运行

　　　　支持各种标签

　　　　与任何 js 框架兼容

官方演示：https://highlightjs.org/static/demo/

如何使用

<!--  放在<head></head>  里面  -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css">

<!--  放在  </body> 后面     -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

//以上是引入文件

<pre><code class="html  php css ">  要高亮的代码     </code></pre>

官网文档： https://highlightjs.org/usage/ 英文版

http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ 中文版

支持的语言：https://highlightjs.org/download/ 在这里面可以看到

英文手册：http://highlightjs.readthedocs.io/en/latest/index.html

时间： 2024-10-03 23:03:36

highlight.js 页面代码高亮的相关文章

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

对于程序员写博客来说,这代码高亮是起码的要求.但是Ghost本身没有支持高亮代码.但是可以通过扩展来实现,它就是highlight.js--附官方网站,看了下首页介绍,真的很强大,现在说说怎么进行安装,很简单. 下载highlight.js 下载地址本来已经包含了很多支持的高亮语言,如果上面没找到你要的语言,可以在下面继续勾选,最后点击下方的下载. 解压安装highlight.js 解压highlight.js到Ghost本地的主题文件夹下面的资源文件夹,我这里是: 安装highlight.

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

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

[技术博客]React Native——HTML页面代码高亮&数学公式解析

问题起源原有博文显示时代码无法高亮,白底黑字的视觉效果不好. 原有博文中无法解析数学公式,导致页面会直接显示数学公式源码. 为了解决这两个问题,尝试了一些方法,最终利用开源类库实现了页面美化. (失败的)尝试方案通过API https://api.cnblogs.com/api/blogposts/博文ID/body 获取到博文的内容. 断点得到内容之后发现是原有markdown形式博文转换后的HTML,比如: <h2 id="github地址">1. GitHub地址

测试使用highlight.js的代码效果

---恢复内容开始--- C#代码 private void NextDateUpdate(DateTime dtt) { dtt.AddDays(1); Response.Write("dtt next date is " + dtt); } private void NextDateUpdate(DateTime dtt) { dtt.AddDays(1); Response.Write("dtt next date is " + dtt); } Script

SyntaxHighlighter 代码高亮极简单配置

页首Html代码:  <script type="text/javascript" src="https://blog-static.cnblogs.com

如何使用 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 代码高亮插件的使用

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

javascript实现代码高亮-wangHighLighter.js

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

博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)

前言在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动画特效,在本文中我们将教大家制作当前简约的页面制作方法. 只要你们有需求,我会尽量帮助到大家,在此感谢各位广大粉丝的支持和理解,我会尽量做到最好,希望小主们不要吝啬你们的支持和推荐,动动小手顶一顶,非常感谢大家长久的陪伴~~ 全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Me

highlight.js 页面 代码高亮

highlight.js 页面 代码高亮的相关文章

highlight.js 页面代码高亮

highlight.js 页面代码高亮的相关文章