markdown-preview-enhanced icon indicating copy to clipboard operation
markdown-preview-enhanced copied to clipboard

能罗列一下样式大全吗

Open ChenChen-Engine opened this issue 3 years ago • 2 comments

不是学前端的,不知道怎么定义样式,之前花好大劲修改了代码块的注释颜色,现在想修改inline code的字体颜色,找了半天是在没找到对应的样式叫什么。

关于列出样式大全的事可以有时间再搞。能先告诉我怎么设置inline code的样式吗

ChenChen-Engine avatar Jul 09 '21 04:07 ChenChen-Engine

所有的样式,右键预览→在浏览器打开→F12打开调试模式,一般左上角有个选择⇱按钮,点击后对应就能得到相应样式。

image

样式是有嵌套的,比如下面是选择引用块后的界面,右面的 html > body > div.mume.markdown-preview > blockquote > p 表明了嵌套关系,对于此来说,所有的 blockquotep 下的设置都会作用在其上。

image

关于 inline code ,这里有一个方法: image 按照上述方法,可以看出实际上是 code 标签: image

但是区别于代码块,这是段落 p 中的代码,也就是 p codeimage

这是我的设置,可以实现此的代码效果:

p code,
li code {
  color: rgb(60, 112, 198);
  background-color: #fefefe;
  font-family: 'Times New Roman', Arial, 'simsun', sans-serif;
  margin: 0 2px 0 2px;
  padding: 0 2px 0 2px;
  font-size: 11pt !important;
}

当然字体可能有点区别,我删去了自己装的字体。

拙作可以稍做参考。https://zhuanlan.zhihu.com/p/382246895

yfzhao20 avatar Sep 27 '21 15:09 yfzhao20

可以参考我的配置,如果要调可以右键然后浏览器打开,检查元素,就知道要改哪些 element 了。

HxxWorkAccount avatar May 13 '22 06:05 HxxWorkAccount