Is it at all possible to display HTML code in WordPress?

1 Views

I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!

Post Views: 1

Related posts

Leave a Reply

6 comments

  1. OK, i figured out what to do.

    1. First go into visual mode.
    2. Select Preformatted in the formatting drop down. A little grey box is created.
    3. Inside the grey box, copy and paste your raw HTML.

    Save it and switch from visual to HTML views a few times. There should be no mangling.

    IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).

  2. WordPress does a strange thing where if you switch between visual and “text” mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.

    If you are just trying to display code on your website you should be able to wrap the code like this:

    <code><p>Example code post</p></code>

    This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts

    If it is a block of code that needs to not wrap you could also use the “pre” tag like so:

    <pre><code><p>Example code post</p></code></pre>

    This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets

  3. Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.

    First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won’t be lost.

    Decoded Code
    enter image description here

    Rendered View File
    enter image description here

    Hope, it helps future reader to find a way.

  4. WordPress is very buggy. It took me a long time to finally succeed. For my WordPress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :

    <pre><code><p>Example code post</p></code></pre>

    That did not work.

    The only way it works for me is:

    Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.

    Hope that helps.

  6. One way to do is to make the code commented. Something like,

    <!--div>
    <md-divider class="org__meta-divider md-soc-theme"></md-divider>
    <h4 class="org__meta-heading">Technologies</h4>
    <ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
        <li class="organization__tag organization__tag--technology">web services</li>       
    </ul>
</div-->

    instead of 

    <div>
    <md-divider class="org__meta-divider md-soc-theme"></md-divider>
    <h4 class="org__meta-heading">Technologies</h4>
    <ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
        <li class="organization__tag organization__tag--technology">web services</li>       
    </ul>
</div>