How to make inline code look distinct from rest of the page style?

  • Hello,

    I am currently using The Box theme but it doesn’t show markdown’s inline code as distinctly as possible from the rest of the post. I would like it to be shown like you see it in the Github.

    This is how it looks in most of the WordPress themes. It is hardly any visible from rest of the test.
    https://i.imgur.com/u21FcJh.png

    This is how it looks on GitHub. Text is monospaced and a border is the text. It is sometimes colored too.

    View post on imgur.com

Viewing 11 replies - 1 through 11 (of 11 total)

  • You could try a code highlighting plugin.

    Thread Starter Sudhir Khanger

    (@donniezazen)

    Thanks stephencottontail.

    Will these code highlighting plugin work along with WP-MarkupCollection

    I plan to move completely to reStructuredText or Markdown for writing posts.

    Thread Starter Sudhir Khanger

    (@donniezazen)

    I tried WP Code Highlight but it only highlights block of code and not inline. The other also seem like mostly for highlighting block of code and not inline or make current inline/block code stand out.

    Ah, I misinterpreted your screenshots. My mistake. If your theme has a custom CSS option, use it; otherwise, get a custom CSS plugin and try:

    background: #F8F8F8;
border: 1px solid #CCC;
border-radius: 2px;
padding: 1px;

    You can experiment with the colors. A site like Colorpicker can help you get the right hex codes.

    Thread Starter Sudhir Khanger

    (@donniezazen)

    Thanks Stephen,

    In the Appearance section there is Edit CSS section.

    Do I just need to paste the above code in there?

    How would this be get applied to specifically the inline or code blocks?

    https://www.htmldog.com/guides/css/beginner/applyingcss/

    Thread Starter Sudhir Khanger

    (@donniezazen)

    Edit CSS is part of Jetpack. Also theme is Gravit and here is the style.css. Although that will keep changing so editing through Edit CSS would be prefered.

    Oh, dang it, I didn’t copy and paste correctly. Use Jetpack’s Edit CSS option and put:

    code {
background: #F8F8F8;
border: 1px solid #CCC;
border-radius: 2px;
padding: 1px;
}
    Thread Starter Sudhir Khanger

    (@donniezazen)

    That’s that is how I want the inline code to look but it creates problem with block code.

    If I block code by indenting 4 space or ~~~ or ` then there will be a big box and then all lines will be treated as code. See this picture https://i.imgur.com/k34fr94.png

    Thanks for your help.

    Can you post a link to your site? I’d like to see exactly what HTML Markdown is outputting.

    Thread Starter Sudhir Khanger

    (@donniezazen)

    sudhirkhanger.com

    It would be nice if it works with most themes and with reStructuredText markup which I plan to using more over markdown.

    Thanks.

    This is messy because Markdown nests <code> blocks within a <pre> block. I don’t have a lot of experience with reStructuredText, but it didn’t appear to have that issue when I tested it just now.

    code {background:#F8F8F8;border:1px solid #CCC;border-radius:2px;padding:1px}
pre {background:#F8F8F8;border:1px solid #CCC;border-radius:2px;padding:10px;}
pre code {border:none;}

    For reStructuredText, use this instead:

    tt {background:#F8F8F8;border:1px solid #CCC;border-radius:2px;padding:1px;}
pre {background:#F8F8F8;border:1px solid #CCC;border-radius:2px;padding:10px;}
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to make inline code look distinct from rest of the page style?’ is closed to new replies.

Tags