mafeng

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

一、寻找样式名称

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

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

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

.likecs_code pre {
font-family: Courier New!important;
font-size: 12px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.likecs_code span {
font-family: Courier New!important;
font-size: 12px!important;
line-height: 1.5!important;
}

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

二、自定义样式

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

.likecs_code pre {
font-family: Courier New!important;
font-size: 18px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.likecs_code span {
font-family: Courier New!important;
font-size: 18px!important;
line-height: 1.5!important;
}

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

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-08-28
  • 2021-09-21
  • 2021-11-24
  • 2022-12-23
  • 2021-10-23
  • 2022-12-23
猜你喜欢
  • 2021-09-06
  • 2021-11-14
  • 2021-08-02
  • 2021-12-29
  • 2022-02-28
相关资源
相似解决方案