zoukankan      html  css  js  c++  java
  • 修改博客园默认的代码字体大小

    通常我们插入代码后,博客园的网页模板就会提供默认的样式进行显示,那么如果我们想要代码变大些该怎么办呢?幸好博客园在博客设置中提供了自定义的css设置,让我们可以最大限度的设定博客风格。

    一、寻找样式名称

    如果你仅仅希望知道如何修改,那么可以调过本节,直接进入修改一节。

    要修改代码样式就必须找到原本的样式,进入到一篇文章中,在chrome中点F12,然后通过点击元素就界面,慢慢找到代码段。需要注意的是这里面的代码都进行了折叠,你需要根据位置来展开。

    可以看见我们已经选择到了代码段的部分,然后我们从右边的syle界面就可以看到样式了,这里我们想要定义的是代码的字体大小,所以我找到了如下的两个样式:

    .cnblogs_code pre {
    font-family: Courier New!important;
    font-size: 12px!important;
    word-wrap: break-word;
    white-space: pre-wrap;
    }
    
    .cnblogs_code span {
    font-family: Courier New!important;
    font-size: 12px!important;
    line-height: 1.5!important;
    }

    这两个样式中font-size的大小都是12px,我们一下就知道该修改什么了。

    二、自定义样式

    通过上面的分析,我现在把默认的样式进行了修改,仅仅把原来12px变为了18px。

    .cnblogs_code pre {
    font-family: Courier New!important;
    font-size: 18px!important;
    word-wrap: break-word;
    white-space: pre-wrap;
    }
    
    .cnblogs_code span {
    font-family: Courier New!important;
    font-size: 18px!important;
    line-height: 1.5!important;
    }

    然后进入博客设置,添加自定义css样式。最后保存即可!

  • 相关阅读:
    centos 编码问题 编码转换 cd到对应目录 执行 中文解压
    centos 编码问题 编码转换 cd到对应目录 执行 中文解压
    centos 编码问题 编码转换 cd到对应目录 执行 中文解压
    Android MVP 十分钟入门!
    Android MVP 十分钟入门!
    Android MVP 十分钟入门!
    Android MVP 十分钟入门!
    mysql备份及恢复
    mysql备份及恢复
    mysql备份及恢复
  • 原文地址:https://www.cnblogs.com/mafeng/p/5674729.html
Copyright © 2011-2022 走看看