Any possible way to restyle the SyntaxHighlighter Code Block?

  • Unknown's avatar
    dogweather · Member ·

    The styling isn’t really that great, as other posters here have noted. At a minimum, I want to increase the line height. I’m pretty frustrated, as a programmer, trying to simply create a minimalist coding blog with good code sample styling.

    Failed Method 1:
    I used to be able to do this by editing a global custom css setting. But I don’t see this option anymore even though my plan (Premium) is unchanged. Now all I see is the Appearance/Edit option to change a highly controlled list of Theme options. Which leads to…

    Failed Method 2:
    In this Edit option, diving deep enough through the menus, there’s the option to customize any block. But when clicking that and going through the list (or searching) … SyntaxHighlighter Code Block isn’t in the list.

    Failed Method 3:
    It’s also possible to embed GitHub Gists. While this kinda sorta works, the styling is usually broken. It might be due to how I have DNS and Cloudflare configured. I’m not really sure.

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

  • Unknown's avatar
    dogweather · Member ·

    Update – I checked, and my Cloudflare isn’t an issue – it’s set to DNS only, not “proxy”.

  • staff-porcupine · Staff ·

    Hi there,

    Thank you for reaching out to us.

    I see what you mean; the SyntaxHighlighter Code Block has limited customization options.
    I have shared this feedback with our developers so it can be considered in future iterations of this block.

    I used to be able to do this by editing a global custom css setting. But I don’t see this option anymore even though my plan (Premium) is unchanged

    Currently, the website is using the Sten theme. As this theme is a Block editor theme, it is not customized through the old Customize menu item, but through the new Site Editor.

    Custom CSS is also added through the Site Editor from the Styles options. Here is more about this: https://wordpress.com/support/editing-css/#access-the-css-editor-1

    You’ll be able to access it by going to Appearance → Editor and clicking on the page to open the Editor. Once there, you’ll see the Global Styles icon on the top right corner. Please click it.

    This will show … (three dots) that you can click to view more options. One of the listed options is the CSS one.

    Here is a GIF with all the steps:

    It’s also possible to embed GitHub Gists. While this kinda sorta works, the styling is usually broken.

    I’m sorry to hear that. I would like to check this for you, could you share an example with me please so w ecan investigate this for you?

    Thank you for helping us help you.
    We will be looking forward to your reply.

  • Unknown's avatar
    dogweather · Member ·

    Thank you so much! I appreciate the detailed answer and I’ll give your solution a try.

  • Unknown's avatar
    dogweather · Member ·

    You wrote:

    “could you share an example [of gists not working] with me please so we investigate this for you?”

    Yes, thank you! Here are a couple of the affected pages. The gists’ syntax coloring isn’t working. Also, sometimes the indents are wrong as well. If I refresh the browser, that usually helps the indent problem:

    Source, demonstrating the problem in several languages: https://dogweather.dev/2022/08/31/five-string-operations-in-five-languages/

    Here’s another affected page: https://dogweather.dev/2023/12/31/my-best-elixir-in-python/

    I’ve had this problem for years, with many different themes.

    Here’s a Medium post showing a successfully embedded gist, so I’m pretty sure the problem isn’t on Github’s side:

    View at Medium.com

  • Unknown's avatar
    dogweather · Member ·

    I’ve also tested in several different browser and still get the same problem.

  • Unknown's avatar
    dogweather · Member ·

    Thank you for the CSS editor help. For anyone finding this thread, here’s my CSS to approximate a GitHub Gist.

    Example (the bg is my page, not the SyntaxHighlighter):

    /* My best attempt at GitHub Gist CSS    */
/* for the WordPress Syntax Highlighter. */

div.line > code {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace !important;
    font-size: 0.7em !important;
    font-weight: 400 !important;
    line-height: 1.8em !important;
}

td.gutter > div.line {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace !important;
    font-size: 0.7em !important;
    font-weight: 400 !important;
    line-height: 1.83em !important;
}

div.syntaxhighlighter {
    border-radius: 0.375rem !important;
    border: 1px solid #ddd !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
  • staff-miltonb · Staff ·

    @dogweather, thanks a lot for sharing! I tested one of your gists and indeed, color coding isn’t currently supported. The only alternative I currently see is to use the <script> embed it’s offered on top of every gist, but you’re probably aware this would require a Business plan and the Custom HTML block – a possible overkill just for this function if you don’t plan to use plugins:

    WP
    Blocks (the full list) » Custom HTML block
    in WordPress.com Support
    2 min read
    Use the Custom HTML block to add HTML code and preview it as you edit it. This guide will show you how to use this block to add code to your website. In this guideAdd the Custom HTML blockAdd your codeSupported code Have a question? Ask our AI assistant Back to top Add the Custom HTML block To add the Custom HTML block, click the + Block In

    While I can’t offer a timeframe for a fix, I also reported this in two separate issues: first, to check if there’s a possibility to offer Gist colors in the future; second, to examine why the embed looks unformatted in the editor.

    Hope this helps for now, but let us know if you run into any other issues!

  • The topic ‘Any possible way to restyle the SyntaxHighlighter Code Block?’ is closed to new replies.