Change text colour in syntax highlighting

  • Unknown's avatar
    pauldutot · Member ·

    Hi,

    I want to change my syntax highlighting so that normal text is white on a black background and other text is highlighted as per css below

    If you need any further help, ask in the CSS Customization forum.

    .syntaxhighlighter {
    background-color: grey !important;
    }

    .syntaxhighlighter .line .number {
    color: white !important;
    background-color: grey !important;
    }

    /* First line */
    .syntaxhighlighter .line.alt1 {
    background-color: #D1D1D1 !important;
    }

    /* Second line */
    .syntaxhighlighter .line.alt2 {
    background-color: #D1D1D1 !important;
    }

    .syntaxhighlighter .keyword {
    color: #007020 !important;
    }

    .syntaxhighlighter .value {
    color: #208050 !important;
    }

    .syntaxhighlighter .string {
    color: #407020 !important;
    }

    .syntaxhighlighter .string a {
    color: #407020 !important;
    }

    .syntaxhighlighter .comments {
    color: #408090 !important;
    font-style: italic !important;
    }

    .syntaxhighlighter .comments a {
    color: #408090 !important;
    font-style: italic !important;
    }

    .syntaxhighlighter .functions {
    color: #FF0000 !important;
    }

    .syntaxhighlighter .line.highlighted .content {
    border-left-color: #c65d09 !important;
    }

    .syntaxhighlighter .line.highlighted .content code {
    font-weight: bold !important;
    }

    .syntaxhighlighter .color1 {
    color: #007020 !important;
    }

    .syntaxhighlighter .color1 a {
    color: #007020 !important;
    }

    Any Help appreciated

    Cyberkryption

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    What do you mean by normal text? Your regular post text outside of the sourcecode shortcode or a specific part of the code (values/strings/etc.)?

    What you’re asking for seems to conflict as some of the code you’re using is the opposite of what you want. Could you spell out exactly which bits you’re trying to change to be different from the code you’re already using?

  • Unknown's avatar
    pauldutot · Member ·

    So if you look at blog, within the code source short codes, I currently have a grey background with black text. If I change the css to have a black ground then obviously all the back text within the code snippet disappears as it is merged with the black ground.

    The idea would be to have a black background with non highlighted text coloured white and highlighted text colored appropriately according to css within the source code short code.

    I would imagine it is a property within the syntax highlighter css but I cant find out how to do it.

    I

  • Unknown's avatar
    hallluke · Member ·

    OK, thanks for clearing things up, this should do what you want if you add it after your existing syntaxhighlighter CSS:

    .syntaxhighlighter .plain,
.syntaxhighlighter .plain a {
  color:#eee!important;
}

.syntaxhighlighter .line.alt2,
.syntaxhighlighter .line.alt1 {
  background:#111!important;
}

.syntaxhighlighter .gutter .line {
  border-color:#00f!important;
}

.syntaxhighlighter {
  padding:5px 0;
  background:#111!important;
}

    You haven’t used every type of code element (comment/string/value/…) so those might still show up slightly differently but just let me know if you need any more help. I’ve also included some extra padding so the sections look neater and you can change the colour of the dividing bar in the third block if you want to as well!

  • Unknown's avatar
    pauldutot · Member ·

    Thanks Halluke,

    That is exactly what I wanted to do. Do you know where i can find all the options for syntax highlighting?

  • Unknown's avatar
    hallluke · Member ·

    It looks like most of them are listed in the code you were using originally (the bits you pasted above), if not then have a look at the original plugin author’s site.

  • The topic ‘Change text colour in syntax highlighting’ is closed to new replies.