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

 使用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

原文地址:https://www.cnblogs.com/hign/p/12002719.html

时间: 2024-11-12 15:09:42

博客园界面代码风格(代码样式)自定义设置的相关文章

博客园页面定制CSS代码

博客园页面定制CSS代码 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

仿博客园编辑器的插入代码 代码高亮功能

代码下载地址:http://download.csdn.net/detail/dfg727/7616305 1. a.配置tinymce,增加一个insert code按钮    b.处理显示页面中展开收缩的高亮部分事件 var tinymce_config = function (selector) { tinymce.init({ selector: selector, theme: "modern", menubar: false, plugins: [ "previe

博客园界面风格代码风格自定义设置

博客园设置界面风格 如何添加一个侧边栏导航 1.在自定义脚本里面添加如下js ## <script> function CreatePostNavigator() { // 目录标题的div var navigatorTitleDiv = '<div id="navigatorTitleDiv">隐藏目录</div>' // 目录所有内容的div var navigatorDivContent = '<div id="navigato

测试博客园不能显示html代码

进过测试,发现博客园的博客标题只要含有“黑马程序员”关键字,博客内容里面的html代码就会无法显示. ------- android培训.java培训.期待与您交流! ----------

博客园禁止手动复制代码

代码如下:将其粘贴到博客园文本中,就可以禁止手动复制 <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> 原文地址:https://www.

博客园界面美化

0x00. 写在前面 皮肤作者:@SevenNight 皮肤作者博客:SevenNight 修改人:@Ryanjie 修改人:Ryanjie 前几天无意之中看到了一款特别好看(每个人的眼光都不一样)的博客皮肤"verdant",皮肤的作者是@SevenNight.当时感觉这款皮肤很简洁却又不失本色,于是立刻更换了这款皮肤.但是在使用过程中碰到了一些问题.由于之前基本没有学过前端,只好自己动手慢慢钻研.最终,之前一些不能实现的或者是自己想要实现的,都满足了. 在这之前还是先感谢@Seve

博客园 css页面定制代码

1.勾选"禁用模板默认CSS" 2.将下面代码粘贴到"页面定制CSS代码"部分 1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体",Arial; 7 background:#205424 url('http://pic1.win4000.com/wallpaper/1/59705b12dec18.jpg')

博客园界面优化

1.自动生成目录 (1)页脚JS代码 <script type="text/javascript"> var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition = 0; while (ele){ topPosition += ele.offsetTop

博客园如何设计自己的样式?

<!-- 在博客后台设置中先申请js权限,等审核通过后,再在页首.页脚Html代码添加下面的js代码. --> <!-- 页首Html代码: --> <canvas height="990" id="c_n9" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.1;" width="1920"> <