WordPress.org

Forums

How to make inline code look distinct from rest of the page style? (12 posts)

  1. Sudhir Khanger
    Member
    Posted 1 year ago #

    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.
    http://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.
    http://i.imgur.com/iuDaoFU.png

  2. stephencottontail
    Moderator
    Posted 1 year ago #

    You could try a code highlighting plugin.

  3. Sudhir Khanger
    Member
    Posted 1 year ago #

    Thanks stephencottontail.

    Will these code highlighting plugin work along with WP-MarkupCollection

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

  4. Sudhir Khanger
    Member
    Posted 1 year ago #

    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.

  5. stephencottontail
    Moderator
    Posted 1 year ago #

    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.

  6. Sudhir Khanger
    Member
    Posted 1 year ago #

    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?

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

  7. Sudhir Khanger
    Member
    Posted 1 year ago #

    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.

  8. stephencottontail
    Moderator
    Posted 1 year ago #

    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;
    }
  9. Sudhir Khanger
    Member
    Posted 1 year ago #

    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 http://i.imgur.com/k34fr94.png

    Thanks for your help.

  10. stephencottontail
    Moderator
    Posted 1 year ago #

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

  11. Sudhir Khanger
    Member
    Posted 1 year ago #

    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.

  12. stephencottontail
    Moderator
    Posted 1 year ago #

    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;}

Topic Closed

This topic has been closed to new replies.

About this Topic