HighLight.js 使用Demo

【HighLight.js 使用Demo】的更多相关文章

HighLight.js 使用Demo

复制下面代码,保存为html,浏览器打开预览即可. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="styleshe…

官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式自动检测编程语言可以在 node.js 平台上运行支持各种标签与任何 js 框架兼容官方演示:https://highlightjs.org/static/demo/ 如何使用  <link rel="stylesheet" href="//cdnjs.c…

使用highlight.js高亮你的代码

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

如何使用 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高亮静态页面的语言代码

显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cdn上的静态资源,引入css和js: <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"> <scr…

markdown-it + highlight.js简易实现

markdown-it 官方demo markdown-it 文档 1.配置highlightjs,针对markdown中各种语言高亮,针对对应的标签 pre code 里面的样式 -- index.js var hljs = require('highlight.js'); // hljs 只针对pre code 里面的样式 hljs.registerLanguage('actionscript', require('highlight.js/lib/languages/actionscrip…

给大家推荐一款高大上的代码高亮插件（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 为文章中的代码添加语法高亮

来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ ------------------------------------------------------------------------------------- 如果我们的文章中包含了代码,Ghost 默认是不做处理的,也就是说:没有为代码增加语法高亮. 其实,这个问题可以从 Ghost 系统入手解决,可惜现在 Gho…

Three.js基本 Demo

对于新手来说,几个简单的例子非常实用,偶然发现几个不错的Demo,分享给大家! Three.js基本 Demo 1.最基本的Hello World:http://stemkoski.github.io/Three.js/HelloWorld.html 2.在网页上调用摄像头:http://stemkoski.github.io/Three.js/Webcam-Texture.html 3.体感操作:http://stemkoski.github.io/Three.js/Webcam-Motion…

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

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

使用 highlight.js 在网页中高亮显示java 代码【原】

<html> <head> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.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">…

Highlight.js语法突出显示

正如我在这个博客开始之前所说的最小可行产品,因此我在几个小时内就开始运行了.这种方法在初始推动之后会减慢你的速度.最新的例子是要提供语法高亮的代码片段. 规格由于使用静态网站生成器,我的狩猎的开始立即产生了一些障碍.首先,我认为不用说,服务器端编程是一个很明显的总不停.第二,像课程或ids这样的具体标记将会非常棘手,因为使用markdown来创建我的文章. Gripes当看到我真正臭名昭着的是,它的血腥难以找到一个简单的解决方案!这些产品通常是非常全面的,而且在个人看来,超过我将花更多的时间来修…

highlight.js 设置行号

原文地址:highlight.js 设置行号博客地址:http://www.extlight.com 一.背景笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器,由于不满足其代码高亮的样式,因此选用 highlight.js 插件来实现代码高亮功能.但是,highlight.js 插件不提供行号的设置功能,于是有了该文章. 二.实现原理 html 的代码块都是通过 <code></code> 进行封装,我们可以将其内容取出封装到 <ol>…

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

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

JavaScript语法高亮库highlight.js使用

highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://highlightjs.org/download/ highlight.js库支持在线定制,按照默认的选择点击Do…

highlight.js代码风格引入方法

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

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

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…

微信JS SDK Demo 官方案例[转]

摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.…

微信JS SDK Demo

微信JS-SDK 分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html 一.JS部分 wx.ready(function () { // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 document.querySelector('#checkJsApi').onclick = function () { wx.…

微信JS SDK Demo 官方案例

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项. <!DOCTYPE html> <html> <head> <meta charset="utf-8">…

高德地图根据经纬度转换成地址JS代码demo

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>逆地理编码</title> <link rel="stylesheet" type="text/css" href="http://…

[整理]Node入门 » 一本全面的Node.js教程 - Demo实践所遇到的问题

花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了系统环境变量,所以可以在任意地方路径下运行node xxx.js.<2>.确定2个环境变量是否已添加(1)一个是PATH上增加node.exe的目录C:\Program Files\nodejs,(已自动添加)(2)一个是增加环境变量NODE_PATH,值为C:\Program Files\nod…

siriWave.js的demo

demo.html <style>body { background: #000; }</style> <script src="../siriwave.js"></script> <div id="container" style="width: 900px; height: 300px; background: #000"></div> <script> va…

js闭包Demo

我们先看一个关于Javascript利用循环绑定事件的例子: 例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景. ﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"﹥ ﹤html xmlns="http://www.w3.org/1999/xhtml&…

anguar.js tutorial demo

http://docs.angularjs.cn/tutorial angular 入门demo : PhoneCat Tutorial App 别人的DEMO(官方版):http://angular.github.io/angular-phonecat/step-12/app/#/phones 我的DEMO(买家秀...)http://paul-xiao.github.io/angularDemo/app/#/animate 按着tutorial做,做着做着就变形了... angular用着挺…

Vue2.0 vue-source.js jsonp demo vue跨域请求

以调用百度的输入提示接口为例 ================================================================================================================================= +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++…

城市连动纯js代码DEMO

前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="js/City.j…

每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .clear:after { content: ''; display: block; clear: both; } ul { list-style: none; margin: 100px auto 0;…