Copy link to clipboard
Copied
Hello
How to display css code as plain text on a webpage without the browser thinking it is code to use?
If I use <div id="header"> the page will break but if I use < div id="header"> with the caret having a space before the div name then it displays ok.
Example of what I want as I am writing notes to myself to explain the process of making a webpage:
<div id="header">
2 Correct answers
If I understand you correctly, you want to write readable code examples that display like code in a browser but don't execute. See screenshot. Switch to Design View (Ctrl + Shift + F11).
Copy & paste this into Code View.
<div class="col">
<h3>Code Example:</h3>
<p><code><div id="header"><br>
Something here...<br>
</div></code></p>
</div>
Pasted into this forum's HTML produces this result:
Code Example:
<div id="header">
Something here...
</div>
Hope that helps.
well , as I said in my eralier post, you should also use entity por the quote inside your code.
so instead of using
<div id="header">
you should use (as an habbit)
<div id="header">
now for the text overflow concerning the PRE tag, in fact the PRE tag is 100%, and you should control, it's own CSS (concerning WIDTH and WRAPPING),
not focus on the PRE CODE selector, but on the PRE selector
so try sometning like
pre {
width: 200px;
whit
...
Copy link to clipboard
Copied
<pre>
<code>
p { color: red; }
body { background-color: #eee; }
</code>
</pre>
Copy link to clipboard
Copied
Thanks but..... : )
I want to show the code like <br> or <strong> or <div id="header">
If the carets are there then the page either does not show anything or gets messed up.
I can display the css: #article { grid-area: article;
But not the html: <li><a class="active" href="#home">Menu</a></li>
without it showing me in that case a menu.
I have the grey box. I also notice it I have more text then it goes outside the box.
Copy link to clipboard
Copied
pre code {
background-color: #eee;
color: #000000;
border: 2px solid #000000;
display: block;
padding: 15px;
width: 70%;
margin: 10px;
}
Copy link to clipboard
Copied
Sorry, you are confusing me. Have a look at the subject line.
Copy link to clipboard
Copied
are you looking to write explicitly
<div id="header">
did you try in code view
<div id="header">
to get in browser
<div id="header">
Copy link to clipboard
Copied
I want this as an example to showup as: <div id="header">
You can see in the example1 screenshot the #article line but the <div id="header"> with < >
will create 2nd box and a mess. example 2 is when I add a space < div id="header">
How to display the without having to add a space?
<pre>
<code>
#article { grid-area: article;
<div id="header">
</code>
</pre>
Copy link to clipboard
Copied
If I understand you correctly, you want to write readable code examples that display like code in a browser but don't execute. See screenshot. Switch to Design View (Ctrl + Shift + F11).
Copy & paste this into Code View.
<div class="col">
<h3>Code Example:</h3>
<p><code><div id="header"><br>
Something here...<br>
</div></code></p>
</div>
Pasted into this forum's HTML produces this result:
Code Example:
<div id="header">
Something here...
</div>
Hope that helps.
Copy link to clipboard
Copied
Alternatively, do what CSS Tricks and other developers do: Use Code Pen or JS Fiddle.
Embed your "pens" and "fiddles" into web pages with copy & paste.
If that's not what you're looking for, please post an online example of what you are looking for.
Copy link to clipboard
Copied
Thanks. I used what you posted and that was the fix : )
I would never have thought of using characters like that.
<code>
<div id="header">
</code>
Afterward I did a search and found a link to this that explains those odd symbols to use.
https://www.w3schools.com/html/html_entities.asp
Issue: I have an issue though with the text going past the div for the pre code.
Question: Is there a fix for that?
See screenshot.
pre code {
background-color: #eee;
color: #000000;
border: 2px solid #000000;
display: block;
padding: 10px;
width: 60%;
margin-left: 30px;
margin-right: 30px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 20px;
}
Copy link to clipboard
Copied
well , as I said in my eralier post, you should also use entity por the quote inside your code.
so instead of using
<div id="header">
you should use (as an habbit)
<div id="header">
now for the text overflow concerning the PRE tag, in fact the PRE tag is 100%, and you should control, it's own CSS (concerning WIDTH and WRAPPING),
not focus on the PRE CODE selector, but on the PRE selector
so try sometning like
pre {
width: 200px;
white-space: pre-wrap;
word-wrap: break-word;
}
Copy link to clipboard
Copied
Thanks again. That worked. The texy now wraps to the next line.
Copy link to clipboard
Copied
As another option https://prettier.io/ Prettier is by far still the best adapter to make code look like it does in editors for your solutions. Used by many web code guide sites and online applications that have online code editors.
Copy link to clipboard
Copied
but, isn't Prettier a code formater, for code editor ?... I think what the OP was querying was a solution to present code in within an HTML page rendered by the browser. I didn't dig enought into Prettier, but do you think that Prettier can handle that?
it's a question, not a sarcasm

