使用highlightjs_markdown编辑器自定义博客园代码高亮

一 下载选定highlightjs主题CSS样式

  1. 先去highlightjs官网选择一个主题,然后直接下载主题包,找到对应名字的css,复制所有css样式代码
  2. 然后博客园选项修改默认编辑器为markdown,如下:

    二 修改CSS代码并设置

  3. 在样式的第一行.hljs前面加上这句

    .cnblogs-markdown
  4. 还需要在背景颜色和字体大小后加入强制覆盖,即!important,只需要改动第一个,如下图:
  5. 将修改后的css样式直接贴在设置里面的页面定制 CSS 代码里面保存即可查看效果,注意,如果有的无效,比如背景颜色和字体没变化,可能是没有强制覆盖的原因,需要在对应样式后面加!important

三 其他样式细节自定义

我选的主题是下图这个:

但是这个注释颜色我不喜欢,这样我们可以修改复制进去的css,修改保存即可,比如这里修改注释颜色:

四 查看代码效果

测试代码效果:

           /**
             * 使用byte数组构造String对象并按照指定编码格式(参数是Charset对象)
             */
            public String(byte bytes[], int offset, int length, Charset charset) {
                if (charset == null)
                    throw new NullPointerException("charset");
                checkBoundsOffCount(offset, length, bytes.length);
                StringCoding.Result ret =
                        StringCoding.decode(charset, bytes, offset, length);
                this.value = ret.value;
                this.coder = ret.coder;
            }

            /**
             * 使用byte 数组,指定charsetName编码名字
             */
            public String(byte bytes[], java.lang.String charsetName)
                    throws UnsupportedEncodingException {
                this(bytes, 0, bytes.length, charsetName);
            }

原文地址:https://www.cnblogs.com/houzheng/p/12099626.html

时间: 2024-11-10 13:12:03

使用highlightjs_markdown编辑器自定义博客园代码高亮的相关文章

博客园代码高亮插件(类似csdn的代码插入)

博客园内置支持SyntaxHighlighter代码着色,使用此内置着色特性需要将博客的默认编辑器改为TinyMCE(“管理”-“选项”中设置).如果使用CuteEditor,CuteEditor会自动去除代码中的空格,造成代码格式破坏. 如果您使用Windows Live Writer写博客(配置步骤),通过Windows Live Writer代码着色插件,可以方便进行SyntaxHighlighter代码着色. 我们推荐的代码着色插件是:Windows Live Writer Source

一个博客园代码高亮的方案

前言 博客园虽然可定制度高,但是在代码高亮这一块做的并不是很好,默认的配色方案看着很不舒服,而且影响页面的整体协调感. 但正因为博客园的可定制度高,所以我们可以自定义代码高亮的风格. 使用纯 CSS 实现,不需要 JS 权限. 关于博客园的插入代码 本章节只针对博客园的 TinyMce 编辑器讨论,我没有测试其他编辑器(例如 Markdown)的代码高亮解析方案. 博客园的插入代码是有两种方案的. 如图所示. 两种插入代码使用的高亮解析方案不同,各有利弊.我对两种方案都做了适配. 我个人推荐使用

初步解决博客园代码高亮的一个方案

今天我要推荐的是一个免费而且支持markdown语法的软件--Typora 它有很多优点,支持多种类型代码的高亮风格,方便的排版处理,支持Latex等,最重要的一点是真正做到了所见即所得ヽ(???)?(???)? 之前在csdn 的时候有markdown编辑器,是左半边写,右半边就可以预览.但Typora厉害就在于它只有一个界面,写好之后就可以直接显示效果了(除了少数的功能无法直接预览,就我所知比如居中处理),这一点就很棒了 写前两篇博客的时候感叹博客园的markdown编辑器真是太难用了,而且

博客园代码高亮

使用syntaxhighlighter插件对代码进行加亮: 1>下载syntaxhighlighter,解压后将shThemeDefault.css和shCoreRDark.css文件上传到博客园 2>设置"页首html代码",添加 <link type="text/css" rel="stylesheet" href="http://博客地址/files/wbbice/shCoreRDark.css"/&g

博客园代码高亮美化教程

先简单展示下效果吧: 首先需要导入js代码,在侧边栏公告处将以下代码复制进入: <script type="text/javascript"> !function(){var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; (function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return(

自定义博客园主题样式

自定义博客园主题样式 基础实现 之前有记录自己自定义目录以及相关样式功能,感兴趣的可以看下 博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色 在此基础上再加点捣鼓内容,实现主题样式透明化.增加侧边“分享”模块.标题级别显示设置 具体代码中会进行注释,可进行相应参考 内容比较粗略,将就看喽~ 透明化 效果 具体实现 ****************************************** 页面定制CSS代码 ************************

博客园代码定制

博客园代码定制 版本:2019-08-08 本文基于Simple Memory模板,且已获取CSS和JS权限,此版本并非最终版本. 如有错误请指出,代码开源可以修改完善,仅用于学习交流,转载时请注明出处! 本文记录了对博客园主页优化的尝试过程以及相关的CSS源码. 在此之前默认已在“管理-选项”部分设定好了每页显示的内容,在“管理-设置”部分进行下列设置. Part 1  定制CSS代码(body部分) 首先应该解决网页端缩放和手机端图片显示不全的问题,这里采用手机端“强制使用网页端”的模式来修

自定义博客园样式

相必每个在博客园开通博客的人都抱怨博客园的皮肤丑得要死,尤其是我这种类处女座的孩子根本把持不住所以我遍鼓敲着美化(老板,我有1WQB,给我美美脸~~) 其实发现博客园里面有个自定义CSS样式,你可以加样式思路就是你选定一个预选皮肤,博客园会给你固定的html结构然后你根据结构来自己添加css,尤其在现在CSS3的年代,你可以把你的博客变得妈都不认得fighting! 1,预选皮肤选择LessIsMore(大多数人用这个皮肤来做自定义)2,然后在页面定制里加入如下代码(only示例,最美的还是你自

自定义博客园皮肤:暗色流体响应式布局

博客园的皮肤模板虽然有100多套,但我需要的作品却没几套,从布局上看,大多是固定布局,有的使用表格布局,有的将侧边栏在HTML页面的代码顺序放在主内容的前面.这些布局方式不利于页面缩放和不同屏幕尺寸与分辨率的设备浏览,尤其是在当今网页浏览设备屏幕尺寸与分辨率多样化的时代,流体与响应式布局才是最佳的选择.从配色上看,博客园有3款还不错的暗色皮肤,但不符合我布局的要求. 我想要自己的博客皮肤满足以下要求: 模版选择:不能使用表格布局,侧边栏在HTML页面的代码顺序放在主内容 的后面,页面结构和样式简