WordPress.org

Ready to get started?Download WordPress

Forums

Crayon Syntax Highlighter
[resolved] How To Line Nums Border Right / Margin Right (3 posts)

  1. trevorson
    Blocked
    Posted 1 year ago #

    This is a very nice plugin. It is the fastest loading syntax highlighter I have seen. Most plugins like this take a few seconds to load the highlighted code when first visiting the page.

    One thing that is a bit off though is the way the CSS is set up. It is amazing how you can have themes, and even use multiple themes in posts.

    But the CSS is sort of limited. You don't really have the freedom to do simple tasks. But this plugin is too nice to cast aside over some CSS.

    I've got two problems I'm hoping to solve. One is the applying a border right to the .crayon-theme-classic .crayon-nums and second to give it a margin right.

    I like how you can highlight the code and not the numbers, but the code is so close to the numbers that sometimes you miss the very first character of code when highlighting. So I'd like to give .crayon-theme-classic .crayon-nums a margin right.

    Let's start with the border-right.

    I am using the classic theme so I am using the classic.css. In the classic.css there is the following code.

    .crayon-theme-classic .crayon-nums {
    background: #dfefff !important;
    color: #5499de !important;
    border-right: 1px solid #b3d3f3 !important;
    }

    Even though it says there is a border-right, a border does not show up.

    So I took a look at the crayon_style.css and found

    .crayon-syntax .crayon-table td,
    .crayon-syntax .crayon-table tr {
    padding: 0 !important;
    border: none !important;
    background: none;
    vertical-align: top !important;
     margin: 0 !important;
    }

    This style clearly over rides the border-right of the classic.css

    So I take out the border: none;

    But that doesn't work. So I apply the style straight to the crayon_style.css

    .crayon-syntax .crayon-table td,
    .crayon-syntax .crayon-table tr {
    padding: 0 !important;
    border-right: 1px solid #b3d3f3 !important;
    background: none;
    vertical-align: top !important;
    margin: 0 !important;
    }

    And it works! Kind of... It gives a border-right to the line numbers, but it gives a border-right to the far right side of the code as well.

    I tried to figure out exactly which class controlled only the line numbers border-right but had no success.

    Even if I had ended up with what I wanted i still wouldn't be completely satisfied. I would much rather be able to alter the code in the classic.css that deals with the line numbers. I could apply the border and margin all in one spot and whenever the plugin updates I could replace one file. That is a much simpler task in my mind.

    So if someone could tell me how to make it so the

    .crayon-theme-classic .crayon-nums

    isn't being over-ridden and I can apply bother a border-right and margin-right all in that one place to achieve what I want.

    Again here is what I am trying to do. Add a border-right and margin-right to .crayon-theme-classic .crayon-nums

    The margin-right is much more important to me than the border.

    Here is the code i would like to use, but so many things are being over ridden the border and margin do not show up.

    .crayon-theme-classic .crayon-nums {
    background: #dfefff !important;
    color: #5499de !important;
    border-right: 1px solid #b3d3f3 !important;
    margin-right: 7px !important;
    }

    Any ideas?

    Thanks

    http://wordpress.org/extend/plugins/crayon-syntax-highlighter/

  2. trevorson
    Blocked
    Posted 1 year ago #

    Modified different things in the crayon_style.css without any luck.

  3. akarmenia
    Member
    Plugin Author

    Posted 1 year ago #

    Hi there,
    Thanks for spotting this! I had another user contact me about a week ago with the same issue and I found the same CSS "bug" you mention above. I've resolved this issue by providing more specificity:

    https://github.com/aramkocharyan/crayon-syntax-highlighter/commit/f2d4d2174285df828ff54dd552a2bef5488a9946

    If you'd like to modify the classic theme, the easiest way at the moment is to follow the instructions here: http://ak.net84.net/projects/crayon-syntax-highlighter/ by duplicating the "classic" folder and renaming the folder to something else, say "classic2", renaming the "classic2/classic.css" file to "classic2/classic2.css" and also replacing all occurrences of "classic" with "classic2" in this css file. Each time Crayon updates, WordPress will replace any modifications in the plugin directory, so be sure to store them elsewhere as a backup as well. If you'd like me to add your theme, please email it and I'll include it in the next release.

    Finally, I'm working on a theme editor which will hopefully provide a much simpler method to creating themes which might be done in a few weeks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic