highlight.js | 易学教程

博客园界面代码风格（代码样式）自定义设置

阅读更多关于博客园界面代码风格（代码样式）自定义设置

　使用highliht的样式自定义自己的代码样式　　1.在 highlight.js demo 选一个你自己喜欢的代码风格　　我用的是vscode编辑器，因此我比较喜欢 Atelier Heath Light 这款风格 2.在 highlight.js demo 下载你喜欢的风格 3.修改风格样式将 .h1js （注意有个空格）替换成 '.cnblogs-markdown .hljs', .hljs- 替换成'.cnblogs-markdown .hljs-' 我的编辑器操作做如下，选择全部替换，目的是添加一个css限制范围，提高此风格的优先级，来覆盖默认的样式替换前：替换后： 4.把替换好的样式赋值到页面自定义css代码框里面 5.大功告成提示：以上操作都是基于HBuilder编辑器本文章来自 hign 的博客,转载请保留原文了链接: https://www.cnblogs.com/hign/p/12002719.html 作者： hign 出处： http://www.cnblogs.com/hign 本博客文章大多为原创或者伪原创，转载请关注博主，原创文章并且留下链接。来源： oschina 链接： https://my.oschina.net/u/4340477/blog/3333481

python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

阅读更多关于 python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

昨日内容回顾 1 . 组件间的传值 1. bus --> 空Vue对象通过向bus对象抛出自定义事件的方式在组件间传递信息 2 . 注意事项： 1 . bus.$on()应该在组件mounted（挂载在页面上）的时候就执行 2 . this对象 2 . Vue实例的生命周期钩子函数（8个） 1 . beforeCreate data属性光声明没有赋值的时候 2 . created data属性完成了赋值 3 . beforeMount 页面上的{{name}}还没有被渲染成真正的数据 4 . mounted 页面上的{{name}}被渲染成真正的数据 5 . beforeUpdate 数据（data属性）更新之前会执行的函数 6 . updated 数据（data属性）更新完会执行的函数 7 . beforeDestroy 实例被销毁之前会执行的函数 8 . destroyed 实例被销毁后会执行的函数 3 . VueRouter 在前端做路由的 1 . 基本使用 1 . 先写路由 2 . 生成路由实例 3 . 将路由实例挂载到Vue对象上 4. <router-link></router-link> <router-view></router-view> <==> <router-view/> 2 . 路由的模糊匹配 1. path: ' /user/:name ' --->

自己写 highlight.js 行号插件

阅读更多关于自己写 highlight.js 行号插件

前端代码高亮插件 highlight.js ，默认是不带行号显示功能的。如果要显示行号，我们得自己实现，或是使用第三方插件。下面就来介绍几种实现方式，并分析优缺点。 1、第一种，使用 <li></li> 标签实现行号当时还在写这个博客程序时，考察了行号显示功能，发现网上一些文章采用这样的方式自己实现行号显示：以换行符 \n 分割，将每行代码用 <li></li> 标签进行包裹，再在最外层用 <ol></ol> 标签包裹，设置 css 样式，利用 ol 列表内的 li 自动编号的特性，轻松的实现了行号显示。这个方法最简单，但是有缺陷：遇到多行文本高亮着色时，highlight.js 是在第一行前面加 <span class="xxx"> 标签，在最后一行末尾加 </span> 闭合。如果简单的用 <li></li> 对每行进行包裹，就会造成 <span> 标签没有正常闭合，又根据 html 标签自动闭合的特性，仅有第一行能正常着色！添加行号前：添加行号后：因为这个缺陷，所以我放弃使用这个方法。 2、第二种，使用 highlightjs-line-numbers.js 插件显示行号 highlightjs-line-numbers.js 这个插件应该是用得比较多的了，目前在 github 上有 243 个 star，本博客程序最初也是使用这个插件。他的实现方式是，将

Highlight.js in textarea

阅读更多关于 Highlight.js in textarea

问题 So i have been struggeling to use highlight.js in a text area since obviously this doesn't work: <!DOCTYPE html> <html> <head> <title>Hello World</title> <link rel="stylesheet" href="styles/default.css"> <script src="highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> </head> <body> <form> JavaScript Injection: <br> <pre> <code> <textarea name="js_execute" cols="50" rows="10" "></textarea> </code> </pre> <input type="button" name="Inject_Execute_Button" value =

reveal.js and hilightjs - how to stop my tags from being automatically closed

阅读更多关于 reveal.js and hilightjs - how to stop my tags from being automatically closed

问题 I am making a presentation using reveal.js I want to display the following in a nice syntax highlighted code block: <foo> So in my presentation html I do this: <pre><code class="hljs" data-trim contenteditable> <foo> </code></pre> This is what gets displayed instead: <foo> </foo> How do I stop my tags from getting closed for me? 回答1: This works: <pre><code class="hljs" data-trim contenteditable> &ltfoo> </code></pre> 来源： https://stackoverflow.com/questions/51055016/reveal-js-and-hilightjs-how

highlight.js does not work with Angular 2

阅读更多关于 highlight.js does not work with Angular 2

问题 I am trying to add syntax highlighting to my application using highlight.js but it doesn't seem to work with Angular 2. Could you please let me know what I might be doing incorrectly? Here is the Plnkr: https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview This is the component import {Component} from 'angular2/core'; @Component({ selector: "my-app", template: ` Hello! <pre> <code class="html"> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> </code> </pre> `

highlight.js does not work with Angular 2

阅读更多关于 highlight.js does not work with Angular 2

I am trying to add syntax highlighting to my application using highlight.js but it doesn't seem to work with Angular 2. Could you please let me know what I might be doing incorrectly? Here is the Plnkr: https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview This is the component import {Component} from 'angular2/core'; @Component({ selector: "my-app", template: ` Hello! <pre> <code class="html"> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> </code> </pre> ` }) export class AppComponent{ } and this is where I am adding highlight.js using cdn: <!DOCTYPE html>