SyntaxHighlighter 代码高亮极简单配置

页首Html代码:

<!--<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/WNpursue/shCoreRDark.css"/>-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shCore.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shAutoloader.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shBrushCSharp.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shBrushCss.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shBrushJScript.js"></script>
<!--代码高亮-->

页脚Html代码:

<script type="text/javascript">
    SyntaxHighlighter.all(); //代码高亮
  </script>

所有插入代码放入对应便签中 以下中:(所有 ‘<‘ 都用VSCode 替换成 ‘&lt;’  否则 <script>等片段会被浏览器识别成标签)

(CSharp =>C#,  Css => css , JScript => javascript )
<div class="Highlighter">
<pre class="brush:javascript;gutter:true;">
     SyntaxHighlighter.all(); //代码高亮这一步需要放在最后
<pre>
</div>
<div class="Highlighter">
<pre class="brush:csharp;gutter:true;">
public String Get()
{
    var a = "Hello World";
    return a;
}
<pre>
</div>
<div class="Highlighter">
<pre class="brush:css;gutter:true;">
.css{
   css:css,
   css:css,
}
<pre>
</div>

原文地址:https://www.cnblogs.com/WNpursue/p/10242061.html

时间: 2024-10-09 22:19:32

SyntaxHighlighter 代码高亮极简单配置的相关文章

SyntaxHighlighter代码高亮插件

SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 使用十分方便,效果也不错,而且几乎支持常见的所有语言. 使用步骤: 一.下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/7757359)当前版本3.0.83 二.引入文件 将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css 其次引入你要高

主题: 为kindsoft编辑器替换SyntaxHighlighter代码高亮,整合DEDECMS

作者: fmamcn, 发布日期: 2012-09-29 12:28:39, 浏览数: 1567 看了狼魂发表的将kindeditor中的代码高亮插件prettify换为SyntaxHighlighter 自己试了一下,总有一些问题,后来还是自己研究了一下,找了一些文档,做了一个 DeDeCMS本身的标记其不好用,更换为KindEditor后确实很不错了,但是KindEditor编辑器的代码高亮确实不怎么好看,也不怎么使用,虽然很简洁,但是功能上还是显得匮乏一些,所以就动手改了改,现在分享出来!

[博客美化] 博客园SyntaxHighlighter代码高亮

在网上搜了一圈,觉得用Windows Live Writer/Open Live Writer代码着色太繁琐了,仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置.Win10用户只能使用Open Live Writer.Web端能干的事干嘛多搞功夫.如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布的话,可以参考这个:https://www.cnblogs.com/huntdream/p/6006350.html,说得很清楚了. [ 补充:下载完SyntaxHighlighter插件需

open live write 代码高亮插件的配置和使用

第一步:下载open live writer插件,下载地址:http://www.cnblogs.com/memento/p/5995173.html 最新插件下载地址:Memento.OLW_V1.0.0.5.7z 第二步:找到open live writer的安装目录,并在目录下创建文件夹Plugins 第三步:解压缩插件的压缩包Memento.OLW_V1.0.0.5.7z,并把文件都拷贝到Plugins文件夹中 第四步:右键选择每一个文件的属性,看是否有解除锁定,如果有,选择解除,斌确认

Django1.9开发博客(11)- 富文本与代码高亮

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成. 功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持AJAX.另一特点是加载速度非常快. django里引用TinyMCE富文本编辑器,其实很简单,前提是你知道django的静态文件配置. 其实这个我已经在前面文章提到过,可以回去再看看. TinyMCE的官方网站是:http://www.tinymce.com/ 下载地址:http://download.moxiecode.c

ckeditor4.4.6添加代码高亮

研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.js库 去ckeditor官网下载Code Snippet,然后把解压的文件codesnippet添加到ckeditor下的plugins文件夹下 然后更改ckeditor文件下的config.js 添加如下语句config.extraPlugins = 'clipboard,lineutils,wi

代码高亮插件SyntaxHighlighter

一 第一 解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题 第二 如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的.其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js,最后引入高亮显示的主题CSS,默认的为shThemeDefault.css 第三 下面以高亮显示JavaScript代码为例讲

tinymce与prism代码高亮实现及汉化的配置

简单介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成.它对IE6+和Firefox1.5+都有着非常良好的支持.功能方强大,并且功能配置灵活简单.另一特点是加载速度非常快的.最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用,好了不多说,想了解更多自行百度,我们进入正题. 一.编辑页配置 1.首先我们需要引用网页样式控制文件及脚本语言编辑文件(其中前两个是tinymce脚本文件,后两个是prism高亮文件)

CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求. 最近项目中要求把得到的后端json数据如下图展示给客户,还需要可编辑的功能,于是就用到了CodeMirror这款插件,经过初步的探索,发现它主题样式非常靓丽,简单美观,效果图如下: 下面我就一步一步说明我的使用过程. 1.首先需要下载codemirror插件,先创建文件夹,下载插件 np