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

今天我要推荐的是一个免费而且支持markdown语法的软件——Typora

它有很多优点,支持多种类型代码的高亮风格,方便的排版处理,支持Latex等,最重要的一点是真正做到了所见即所得ヽ(???)?(???)?

之前在csdn 的时候有markdown编辑器,是左半边写,右半边就可以预览。但Typora厉害就在于它只有一个界面,写好之后就可以直接显示效果了(除了少数的功能无法直接预览,就我所知比如居中处理),这一点就很棒了

写前两篇博客的时候感叹博客园的markdown编辑器真是太难用了,而且对代码的处理真的很丑(;′д`)ゞ,没有高亮,不甘心的我就去网上看了看怎么能让代码高亮显得漂亮一点,看到别人的博客说说要定制css或者用在其他地方写好复制过去。定制css我用不大来,个人的css知识有限(つД`)

就在这时候我想起了我用的Typora或许能解决我的困扰,于是我试了下3中常见类型的代码如下:

print("Hello World")    #输出Hello World
public class Main {
    public static void main(String[] args){
        System.out.println("Hello World");
    }
}
#include <algorithm>
#include <iostream>
using namespace std;
int main()
{
    cout << "Hello World";
    return 0;
}

然后我又测试了Latex公式

\(\sum_{i=1}^{i}\) \(\frac{1}{3}\) \(\sqrt{x+2}\)

最后是怎么将写好的markdown发表到博客园上↓

就按照图中划线的部分复制然后粘贴到博客园就行了

关于Typora的快捷键等功能我在这里就不再赘述了,直接下载来用操作一下很快就会熟悉了

附上Typora链接:https://www.typora.io/

ps. 果然好看多了啊!!!!真让人兴奋(????)?"""

如需转载请注明出处

喜欢支持一下呗~

原文地址:https://www.cnblogs.com/MartinLwx/p/9153278.html

时间: 2024-10-12 17:10:44

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

博客园代码高亮

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

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

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

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

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

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

一 下载选定highlightjs主题CSS样式 先去highlightjs官网选择一个主题,然后直接下载主题包,找到对应名字的css,复制所有css样式代码 然后博客园选项修改默认编辑器为markdown,如下: 二 修改CSS代码并设置 在样式的第一行.hljs前面加上这句 .cnblogs-markdown 还需要在背景颜色和字体大小后加入强制覆盖,即!important,只需要改动第一个,如下图: 将修改后的css样式直接贴在设置里面的页面定制 CSS 代码里面保存即可查看效果,注意,如

博客园代码高亮美化教程

先简单展示下效果吧: 首先需要导入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(

博客园代码定制

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

阿里云MVP携手博客园,寻找下一个MVP!专属服务、大咖交流、企业游学等你来!申请就送100元代金券!

"传递技术力量,传承布道精神."阿里云MVP(最有价值专家)第七期全球招募开启,与博客园携手,寻找热爱技术.乐于分享.关注个人成长的你! 戳链接,通过[博客园绿色通道]一键直达: https://mvp.aliyun.com/mvp/apply?recommendType=2&recommendId=qxJWelDeU8KrQWUUyLKtYw== 前20名申请即提供100元代金券,认证成功还送阿里云T-shirt. 如果你是资深开发者,想第一时间接触最新云技术,实现个人能力跃

博客园编辑器切换的一个问题

刚刚写的一篇文章是用markdown编辑器写的,里面有代码,格式不太好看,想切换为默认的TinyMCE编辑器 重新再编辑一下,然鹅等我把默认编辑器设为tinymce,重新编辑的时候,发现编辑器还是原来的markdown编辑器, 这就尴尬了,没有生效,我想是缓存来着,又等了几分钟,发现还是不行. 抱着试一试的态度我添加了一个新随笔,神奇的事情发生了,出现我想要的tinymce编辑器,写到这想着大伙应该明白了, 博客园保存文章的时候应该是还保存了这篇文章对应的编辑器类型,重新编辑器文章的时候还是会用

博客园的一种美化方案

页面定制css 注意是darkgreentrip #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: rgba(245, 245, 245, 0.7); padding: 30px; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } body