It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Change Code block font-size

I've really like to change the font-size of a code block in confluence. Therefore i need to 'change' the css, this can be done in > Space Administration > Space Stylesheet part of Confluence.

I'm struggeling trying to get the right css-code in there.

I've tried many different things, but i seem not to be able to fix this. Using inspect element in Chrome gave the the following:

Looks i've got to deal with the ".syntaxhighlighter div", because if i'm changing the value of the font-size here (in the above image where my cursor is), the font actually changes.

Now the question is how to get this overridden in the Space Stylesheet....

3 answers

1 accepted

0 votes
Answer accepted
Sean Curtis Atlassian Team May 07, 2013

Your CSS selector is wrong. You are matching "code" (element) instead of ".code" class.

Even if you fix this, it won't work. Try this instead:

.syntaxhighlighter .code .container * {
    font-size: 8px !important;
    line-height: 20px !important;
}

Is there anyone that can help me?

The answer of Sean did do the trick. I did try different stuff, and at the end I came up with the following final solution:

.syntaxhighlighter .code .container *
{
    font-size: 12px !important;
    line-height: 14px !important;
}

.syntaxhighlighter table td.gutter *
{
    font-size: 12px !important;
    line-height: 14px !important;
}

Sean Curtis Atlassian Team May 07, 2013

You can comma-separate those two.

.syntaxhighlighter .code .container *,
.syntaxhighlighter table td.gutter *
{
    font-size: 12px !important;
    line-height: 14px !important;
}

Sean, you are right. First i had a difference between those two styles, thats why i had two. But at the end they were the same.... Thanx

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published yesterday in Off-topic

Teams behind the teams - Your nominations please!

Teams do amazing things together. We’ve talked about the myth of the lone genius and how everything is actually the result of teamwork. You might be thinking, What about a novelist writing, say, Th...

60 views 0 7
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you