Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
  • #1153877

    I would like to show html in front end for teaching purposes.
    I’ve tried doing this with the code block, but nothing shows up in the front end.
    Is there a way to show html in front with enfold without a plugin?



    Hey sundara88,

    You can try the pre and code tags:,

    Best regards,


    I’ve tried this but it doesn’t work.
    It shows the linked address but not the actual code needed to get the linked address.
    Also when I use

     or  the rest of the visual editor gets  the grey striped background (which is usually only the background for the code.
    Any ideas?

    Ha ha look it even made the background here :)


    pre and code, I said, and it changes the background


    the code-block alb is correct : but do you have set the : “Action with codeblock option” . ?


    Yes I tried that, but the code block doesn’t show up…



    Did you try a regular text block element? If that doesn’t work then we need to be able to see and reproduce the problem you are having.

    Best regards,


    Hi Rikard,
    Yes I’ve tried adding the code to a code block and to a text block. Both don’t work…



    Thanks for the update. So how can we reproduce the problem you are having?

    Best regards,


    Would it be because I’m using code to create a link? So in the front end it only wants to appear as a link and not code?
    This is the text in my text editor:

    To make your external links open in a new tab you have to add this code in your text or html editor:

    If this is your link:

    Change it to this:

    Ok so I typed the code for the link with pre and it also turns it into a link…. This is exactly what I get in my front end….

    I’ll type it without pre now to see what happens…

    If this is your link:

    Change it to this:


    Ok so I can’t show any html here either…
    I’ll try the code tab in your menu here:

    If this is your link:
    <a href=""></a>

    Change it to this:
    <pre><a href="" target="_blank" rel="noopener"></a>

    • This reply was modified 8 months, 1 week ago by  sundara88.

    ok so these code tabs work
    I need it to show up like that (above)

    but how do I get it to work on my website??

    • This reply was modified 8 months, 1 week ago by  sundara88.

    Hi Lisa,

    We could try to help you out in theory here, but it’s much easier if you simply link to where we can see the actual problem you are having.

    <a href="" target="_blank" rel="noopener"></a>

    Best regards,



    Also, you can combine pre and code tags:

    pre code --your code goes here-- end pre end code

    In your examples above it looks like you are not closing the tags properly.

    Best regards,


    Do you mean you want to check it out on my site?
    I’ll attach login details.



    Thanks for the details, but I can’t see a user?

    Best regards,


    oh sorry..


    Sorry for the late reply, I believe that this article will help you, please scroll down to “Method 3. Display Code in WordPress Manually (No Plugin or Block)
    While there are plugins such as Lite Syntax Highlighting that can make this easier for you by wraping your code or link with a shortcode like this:

    [slh lang="html"]<a href="https: // www." target="_blank" rel="noopener"></a>[/slh]

    and it will show like this:
    From your posts above it seems that you didn’t like how the background color changed when using <pre> or <code> but this can be changed with css, so if you find a solution that works for you but don’t like the colors, we maybe able to help adjust.

    Best regards,


    Hi Mike,
    No that is not the problem (I don’t care what the code looks like at this point) I just need the code to show up.
    I’ve tried a few plugins but with all of them the code does not show as CODE on the frontend but as the web address…
    I just tried the plugin you mentioned above, but I don’t get the code again,
    please see attached screenshot, this is what I get in front end, not the example screenshot that you showed.

    I don’t want to show the web address I want to show the code to show how to create a link that opens in a new tab.

    Please someone have a look in my site to see why this does not want to work for me…

    Thanks for your help.


    I just had to delete: Lite Syntax Highlighting
    because it made my whole sidebar disappear…
    a workaround without a plugin is preferred.


    Ok, the article I linked to above will show you how to do this manually, I went ahead and did it for you:
    To recap paste your html code into this website and click encode and copy the output to your site:
    Now I assume that you are “previewing” your page and it is not looking right, “previewing” doesn’t always work correctly with the Advanced Layout Builder because the WordPress “previewer” doesn’t connect properly to the elements and there is a preview cache.
    To check you can “privately publish” and view your page, and then set your page back to draft if you wish, but only admins and editors can view a “privately published” page.
    Here is what the published page will look like:
    Now another issue you may run into is if you re-edit your page again and WordPress converts your encoded code back to the regular code which will show the link again, if this happens just encode your code again at the website above. (I have to deal with this every time I edit one of my posts here.)
    I know this is a pain, but this is a WordPress “shortcoming” I guess no one thought of showing the code of a link, and that is why there are so many plugins that correct this.
    An alternative to dealing with all of this is to post a screenshot of the code you want to show, then WordPress can’t change it.

    Best regards,


    Well this is a real pain. Somehow my comment section and my sign up form disappeared.
    Is this because of the code or did you accidentally delete it? And every time the code reverts back to a link.

    Is there really no other way?
    What about all these other websites that show code, how do they do it.
    I don’t mind using a plugin, but so far they all didn’t work either…
    A screenshot would be a real last resort because you can’t copy and paste from a screenshot.


    I didn’t delete your elements, I can see them, Please see the screenshot in Private Content area.
    Sorry, perhaps I was not clear, showing code is not the issue here, showing code is easy with the <code> tag, showing a link in the code tag is the WordPress issue.
    In the article I linked to above suggested using the SyntaxHighlighter Evolved plugin, I tested this plugin on my site along with the
    <pre> <code> tags and made this screenshot to help explain.
    I hope this helps.

    Best regards,


    Hi Mike,
    I didn’t realise it only happened because it’s a link. So I might use a screenshot for this one and a code block for future code.
    Thanks so much for your patience and help.
    You can close the thread.
    Thanks :)


    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘show html in front end’ is closed to new replies.