本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引的显示、添加文章末尾的固定信息。...0 获取权限 首先,在自定一个博客样式之前,我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。...【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 。...1 美化文章标题 在【博客设置】页面中的【页面定制css代码】框中输入下面的css代码即可完成文章标题的美化的。...important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } 2 加一个可爱的返回顶部功能 css代码
使用博客自带的编辑器过于简单,无法做到代码高亮及标题样式美化。 通过以下设置可以美化文章排版问题。 下载OpenLiveWriter客户端并安装高亮插件 1....下载代码高亮插件 Memento.OLW_V1.0.0.5.7z https://files.cnblogs.com/files/memento/Memento.OLW_V1.0.0.5.7z...发布后即可看到代码高亮效果 标题样式(css)美化 我们在[管理]-->[设置]-->[博客设置]-->[页面定制CSS代码]粘贴如下面的代码,当然也可以根据自己喜好定制 #cnblogs_post_body
最近有几个博客园的朋友们私信问我怎么设置代码颜色字体的,干脆整理一下。...博客园写博客的TinyMCE编辑器下添加代码有两种方式,我平时用的是第二种,就是代码背景是一行灰一行白的,行号和代码之间有一条绿色竖线的这种。...important; } ---- 2017.4.30更新:博客园设置Google-code-prettify渲染代码高亮
昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。...2.首先你得申请一下你博客园的js权限; 不申请,你们的js代码是没有用的,申请成功是这个样子的 ? 3.找到页面定制CSS代码区域,勾选禁用默认CSS; ? ...)(支持JS代码)‘’,在里面加入如下代码; #clock { font-family: 'Share Tech Mono', monospace; color: #ffffff...在“博客侧边栏公告(支持HTML代码)(支持JS代码)”中找到如下代码; <embed src="//music.163.com/style/swf/widget.swf?...在“博客侧边栏公告(支持HTML<em>代码</em>)(支持<em>JS</em><em>代码</em>)”中找到如下<em>代码</em>; <img src="https://files.cnblogs.com
博客园文章版权声明(js自动生成) 一.代码 我比较直接,直接上代码,把下面html放右侧,首页,页脚都可以 #MySignature { display: block
步骤三:编写/SyntaxHighlighter/WebRoot/syntaxHighlighter.html 下面是代码部分: 1 60 107 111 115 <script class="javascript" src="Scripts/shBrushCpp.<em>js</em>
下面是calendar.js插件文件的代码。...//js日历 (function(){ var calendar = function(calendarId){ //日历对象不存在,返回日历 if(!...} } } })(); } window.calendar = calendar; })(); 引用方式很简单,只需引入这个js
效果预览 让我们先来看一下实现代码高亮之后的效果图: ? 该片段摘取自这篇博客文章,纯黑色的背景,sublime text风格的高亮。...添加CSS代码 在设置-页面定制CSS代码中,粘贴如下代码即可: /* Monokai Sublime style.
效果预览 在前面两篇文章中,我们分别为大家介绍了如何在博客园平台的文章添加目录,以及为文章代码添加高亮,在这篇文章中我们介绍下为文章中的代码添加行号显示,具体效果如下所示(效果图的源文章请参考这篇博客)...插入页脚代码 在设置-页脚HTML代码中插入如下代码: hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad(); 版权声明
博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)~ 先看一下效果,再详细介绍方法~ [img...] 查看博客园markdown所使用的代码高亮插件 先找到一篇markdown模式下写的文章,然后打开Chrome,依次使用 F12 -> network -> filter ".js",可知 代码高亮插件是...important; border-collapse: collapse; word-break: break-word; } 实现加代码行号、显示代码所用语言的具体js代码 然后在页脚HTML...中加入如下js代码~ $(function () { if ($(".cnblogs-post-body pre > code").length > 0) setCodeRowWithLang...上述js函数setCodeRowWithLang()对文章内容和博客首页都是有效的~ 本文首发于本人的博客园博客: https://www.cnblogs.com/enjoy233/p/10410089
script charset="UTF-8" type="text/javascript" src="http://files.cnblogs.com/files/miqi1992/d3.v3.min.js
博客园美化 对博客园美化,基于博皮“SimpleMemor”进行的修改,首先要申请js权限。...} <...页面定制CSS代码 页脚Html代码 <script src="https://blog-static.cnblogs.com/files/wupeixuan/live2d.<em>js</em>
首先说一下用pretty的缺点 之前的TinyMCE编辑器下发布代码,如果是插入代码的两个按钮里的右边的那个,pretty渲染后会变成错乱的,标签都会显示出来。...如果要设置行号,Markdown编辑模式的代码会渲染成一行一块,很奇怪,因为每一行都有标签,所以只好选择不要行号。 接下来是设置的步骤 首先要确保你已经开启js功能。...jQuery博客园已经自动加载了。就不用我们加了。...prettify.js是在这里下载的:https://code.google.com/p/google-code-prettify/ (function() { $("pre").addClass
博客园允许用户设置多样化的主题。通过选择皮肤,然后开启JS脚本权限,在设置里面植入跟皮肤配套的CSS、JS,并且禁用默认的CSS,即可实现个性化的界面风格和交互行为。...基本设置、代码高亮、开通JS权限 皮肤选择 SimpleMemory 3....页面定制CSS代码 这里我选择的是 Cnblogs-Theme-SimpleMemory V2.1.0 版本 @import url(https://cdn.jsdelivr.net/gh/BNDong.../Cnblogs-Theme-SimpleMemory@2.1.0/dist/simpleMemory.css); 注意: 页面定制CSS代码我使用的是外链导入形式(免费jsdelivr cdn...\js等)可以自己托管维护,可以自行扩展界面交互 图片等静态资源可以自行寻找免费图床,当然也可以自己放到GitHub上面托管,采用CDN访问(参考这里) 托管到博客园上 图片等静态资源也可以自行搭建云盘使用
给博客园加一个会动的小人-spig.js 效果大概是这样,感觉十分可爱qvq ? ? 那么怎么添加呢? 首先需要开通js/html权限。...然后在页脚html代码中加入以下代码 在侧边栏css中加入以下代码(注意有个地方需要自己填图片地址) .spig {display:block;width:175px;height:246px;position:absolute...顺便吐槽一句,原作者给的api都挂的差不多了,然鹅我是个js菜鸡连get/post都不会,所以凑合着改了一下api,欢迎各位大佬给出更好的解决方案qwq //右键菜单 jQuery(document)....true; } } }).mouseup(function () { _move = false; }); }); 参考资料 博客园加上博客精灵
/UglifyJS/ https://github.com/LiPinghai/UglifyJSDocCN/blob/master/README.md 使用方法 npm install uglify-js...-g uglifyjs example.js -c -m --mangle-props -c 代码压缩 -m 代码混淆 --mangle-props 混淆属性名 -b 美化显示 // 原代码 const...JShaman https://www.jshaman.com/ JShaman 是国内公司开发的js代码加密商业产品 免费版可以直接使用 // 原代码 const person = { age...,通过数组、字典等各种形式存储、拼接、替换等,最终进行还原,这里面没有利用到复杂的语法以及js 语言本身的特性,所以我们一点点解开也学不到什么; 这个代码就不一样了,我们一步一步解开它,尝试去学习其中的思路...console.log(c) 这次我们设计三个返回值,分别是函数定义、数值、字符串 看到这,我都蒙了,经过查询资料,我找到了两个维度的复杂的原因 JavaScript 中函数只能有一个返回值,你就说这玩意如果没学过 js
1.1、自动生成目录 首先得有js权限 (1)页脚js代码 /* 功能:生成博客目录的JS工具 测试:IE8,火狐,google...返回顶部 1.3.爱心特效(鼠标点击页面) 把下面代码复制到公告栏里面 <!...'head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/<em>js</em>.../share.<em>js</em>?...v=89860593.<em>js</em>?
最近抽空学了学canvas,然后用canvas做了个小球运动的demo,大致的效果如下: 虽然网上已经有很多这样的demo,但是还是想根据自己的思路来写一个,下面先跟大家讲解一下源代码,先看html代码.../index.js"> html很简单,没啥讲的,就是css那块兼容性你们注意下就好(我懒,没写兼容),再看看canvas的js处理代码,就是上面引入的...'+getRandom(255)+','+getRandom(255)+','+Math.random()+')'; }; }; 写完之后,还是想把他应用起来的,所以我就想用来他装饰博客园的侧边栏...,所以进到: 把上面的js改了改,插入到博客园页面: 完整代码如下: var sideBar = document.getElementById('home'); var...一起享受代码的作用,项目代码中还有很多优化的地方,欢迎大牛拍砖,也希望刚入门的人你呢个看懂,不懂可以留言问我。
记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network....代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量的增大而线性增大 通过debug观察发现颜色数组会有不少重复的数值,而同样的输入会导致相同的输出,然后对整个数据的1M个点进行统计分析,发现重复率相当高
领取专属 10元无门槛券
手把手带您无忧上云