Changing code font size on wordpress

0 Views

In a post of mine in wordpress I’m posting source code as described here.

An example of the code goes like this:

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

The result looks like this:

enter image description here

What I want to do is change the font size and make it smaller.

I’ve inspected the element of the code which gives the following:

enter image description here

I’ve tried adding custom css using the Simple Custom CSS plugin to change the font size but to no avail.
The CSS that I’ve tried is the following: 

code {
    font-size: 10px;
}

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

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

How can I change the font-size of the code?

Post Views: 0

Related posts

3 comments

  1. Your element seems to be part of the page therefore custom CSS should work. Most probably it is not working as the CSS rules of another stylesheet (probably the WordPress.com default) are stronger or more specific.

    Try with the CSS !important rule:

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

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

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

    If this still does not work use more specific CSS selectors with the important rule.

    If this still does not work your custom stylesheet is not applied yet and you have to check your configuration.

  2. You are trying to style elements based on their css classes, but your code doesn’t have the “.” before their names. Based on the example of the link:

    .syntaxhighlighter { font-size: 10px; }

    should do the trick.

  3. Changing the font size of your code on WordPress is pretty easy. This is what you need to do.

    1. Switch from the Visual tab to the html tab in the editor

    enter image description here

    2. Surround your codes with these tags:
    <pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>

    for example:

    enter image description here

    That’s it.

    This was what my code looked like in preview mode BEFORE I used those tags (While I used [language= "java"])

    enter image description here

    And this is what it looks like AFTER using the tags:

    enter image description here

    The available font sizes are xx-small, x-small, small, medium, large, x-large, xx-large.

    If you are not familiar with html, it is advisable to switch back to the visual tab. Hope this was helpful

Comments are closed.