Support » Fixing WordPress » How to generate a rectangular box for a piece of code or commands

  • Resolved kushalkoolwal

    (@kushalkoolwal)


    Hi,

    Many blogs are able to generate a rectangular box around the text. The text is usually a command or a sample code – so that it stands out. For example, this website has a box around the text – “cd /tmp” and so on.

    Is there any plugin in wordpress that will let me generate a similar box on my WP blog? If not is there any in-built HTML tag that I can use?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Any one???

    Usually aesthetics are managed with themes. In the case of the site you link to, they’ve wrapped that text in <code></code> and then styled the code attribute.

    The easiest way to get something like that would be to add

    code {
      border: 1px dashed black;
    }

    to the style.css file of the theme you’re using. Then where you want that border, do something like this:

    <code>Code goes here.</code>

    There’s much more you can do with CSS, but that should get you started.

    Moderator Jan Dembowski

    (@jdembowski)

    Brute Squad and Volunteer Moderator

    Any one???

    Sheesh, it’s only been 15 hours 🙂

    I personally like this one: WP-Syntax. It let’s you surround your code with

    <pre lang="text">
    Useful code here
    </pre>

    If you drop a wp-syntax.css in your theme’s directory, you can easily use CSS to style the box.

    You will have to add the tags via the HTML section of the editor.

    I have tried WP-Syntax, but it doesn’t work for me.

    The codebox is about 15px high and blank 🙁

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to generate a rectangular box for a piece of code or commands’ is closed to new replies.