[resolved] How to generate a rectangular box for a piece of code or commands (5 posts)

  1. kushalkoolwal
    Posted 7 years ago #


    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?


  2. kushalkoolwal
    Posted 7 years ago #

    Any one???

  3. ikirudesign
    Posted 7 years ago #

    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.

  4. 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

    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.

  5. AbeOnTech
    Posted 7 years ago #

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

    The codebox is about 15px high and blank :(

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.