在 wordpress 上更改代码字体大小答案

【问题标题】：Changing code font size on wordpress在 wordpress 上更改代码字体大小
【发布时间】：2016-06-05 20:14:45
【问题描述】：

在我的 wordpress 帖子中，我发布源代码，如 here 所述。

代码示例如下：

[code language="csharp"]
   // Code goes here
[/code]

结果如下：

我想做的是改变字体大小并使其变小。

我检查了代码的元素，它给出了以下内容：

我尝试使用 Simple Custom CSS 插件添加自定义 CSS 以更改字体大小，但无济于事。我试过的 CSS 如下：

code {
    font-size: 10px;
}

.csharp plain {
    font-size: 10px;
}

.csharp keyword {
    font-size: 10px;
}

如何更改代码的字体大小？

【问题讨论】：

【解决方案1】：

您的元素似乎是页面的一部分，因此自定义 CSS 应该可以工作。很可能它不起作用，因为另一个样式表的 CSS 规则（可能是 WordPress.com 默认）更强大或更具体。

尝试使用 CSS !important 规则：

code {
    font-size: 10px !important;
}

.csharp plain {
    font-size: 10px !important;
}

.csharp keyword {
    font-size: 10px !important;
}

如果这仍然不起作用，请使用更具体的 CSS 选择器和重要规则。

如果这仍然不起作用，您的自定义样式表尚未应用，您必须检查您的配置。

【讨论】：

不幸的是，这没有奏效。更具体的 CSS 选择器是什么意思？
更具体的是例如.syntaxhighlighter code.plain { font-size:10px !important;但是很可能您的样式表不适用于代码。检查原因！
刚刚开始使用 css 和 html，所以不太了解 wordpress 背后的工作原理。不过我正在努力:)
太棒了！它适用于更具体的选择器，将它们添加到您的答案中，我会接受。我添加了以下内容：code.plain、code.keyword、code.string、code.color1 都带有 .syntaxhighlighter 前缀和 important! 关键字

【解决方案2】：

您正在尝试根据元素的 css 类设置元素的样式，但您的代码没有“。”在他们的名字之前。基于链接示例：

.syntaxhighlighter { font-size: 10px; }

应该可以解决问题。

【讨论】：

【解决方案3】：

在 WordPress 上更改代码的字体大小非常简单。这是你需要做的。

1.在编辑器中从Visual 选项卡切换到html 选项卡

2。用这些标签包围您的代码： <pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>

例如：

就是这样。

这就是我的代码在预览模式下的样子之前我使用了这些标签（虽然我使用了[language= "java"]）

这就是使用标签AFTER的样子：

可用的字体大小为xx-small, x-small, small, medium, large, x-large, xx-large.

如果您不熟悉html，建议切换回可视选项卡。希望这会有所帮助

【讨论】：