How to show a script for your website

by

Most people don’t know but even wordpress code block is useless in these cases, i mean, what if the code is too long to the left? well that will just break the site itself making a horizontal scrollbar for the whole page, and the fix for this is very simple.

Step 1:

First of all you need to know your enviroment, to add this css code in wordpress i recommend using WPCode, for custom stuff using HTML i wold use just a <script> tag.

Step 2:

Add this code into the solution, using <style> “code” </style> or a css script on a HTML page: (WPCode can add it at the header of wordpress pages.)

pre {
     white-space: pre; /* double spaces will still exists with "pre" */
     overflow-x: auto; /* adds horizontal scroll if needed */
     overflow-y: auto; /* adds vertical scroll if needed */
     max-width: 100%; /* keeps inside the size of the block */
}

Step 3:

Now just use <pre> and </pre> to make the code appear as it is using a HTML block on wordpress OR use it as it is in a HTML file :D.

Tips:

use “&lt;” and “&gt;” to express < and > in a html format, so the html will not be rendered, just shown as < or >, for example:

<!-- this is a tag using &lt; and &gt; -->
<pre>
print("hello world!")
</pre>

also “&” is the main command for these symbols, so i hightly recommend to use “&amp;” to avoid conflicts with your code. In any case you need a script to automate this (for every symbol who can conflict):

import html

def swap_text(text):
    return html.escape(text)

print(swap_text("your text with & or any other"))

Leave a Comment