Blocks of code are formatted oddly

  • I’m running Seasonal on my website and I use Markdown. When you want to write code on your site in Markdown, you use four spaces (or a tab) before each line of the code, which converts to <pre><code> when the page is displayed.

    I have a recent blog post in which I do this, and the code is badly formatted; it looks like there’s a border on the top and bottom of each line in addition to the border around the block of background colour, and the text is a colour which does not show up well against the grey. It’s like two separate visual styles are being applied.

    Contrast this with a previous post of mine. On this webpage, instead of using Markdown to create the blocks of code, I’ve just wrapped each block of code in <pre> tags and it looks much much better.

    Please can you tweak the CSS such that the result of the Markdown code looks the same as the example in the second blog post (black on grey)? It would make the theme much easier to use when discussing code!

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    The <code> and <pre> is styled with a border from this:

    pre, code {
    background: #eee;
    font-family: Courier, monospace;
    border: 1px solid #d6d6d6;
}

    You can create some custom CSS to change that if you wish. If you use jetpack, you can use the Edit CSS module, or use a plugin called Simple Custom CSS.

    Thread Starter johncoxon

    (@johncoxon)

    But this means but default your theme looks bad when it’s used to display code; this strikes me as something it would be worth fixing in the theme itself?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Not really…I don’t believe most users of my themes use markdown or even display code.

    However, I will consider your request in the next update as I know some people do opt in for the <pre><code>...</code></pre> set, hence your suggestion (plus I know the WP forums here does that). In the meantime, the custom CSS to change how the code displays can be easily done at this time.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Blocks of code are formatted oddly’ is closed to new replies.