WordPress.org

Forums

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

  1. Sudhir Khanger
    Member
    Posted 11 months 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
    Member
    Posted 11 months ago #

    You could try a code highlighting plugin.

  3. Sudhir Khanger
    Member
    Posted 11 months 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 11 months 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
    Member
    Posted 11 months 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 11 months 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 11 months 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
    Member
    Posted 11 months 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 11 months 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
    Member
    Posted 11 months 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 11 months 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
    Member
    Posted 11 months 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;}

Reply

You must log in to post.

About this Topic