+ 7

Ignoring Tags in HTML, can it be done?

Im making a small webpage, a tutorial on HTML for my classmates. However, I find it very annoying that the example code gets interpreted by the browser. Is there any way for, for example, this to stay unformatted, and show up as text in the browser: with the tags intact? <ul> <li>This is an example</li> </ul>

22nd Apr 2019, 6:11 AM
Trigger
Trigger - avatar
31 Antworten
+ 2
Thomas how about this one? https://code.sololearn.com/W1gOde1sjWVh/?ref=app Just add class in the div and DONE!
23rd Apr 2019, 7:51 AM
Kartik
Kartik - avatar
+ 15
You will need to replace all ‘<‘s with ‘&lt;’, the HTML less than character entity. Or, you could use the CSS in this code to help you: https://code.sololearn.com/W2UPaoO0GCSG/?ref=app Good luck with your website!
22nd Apr 2019, 6:30 AM
Rowsej
Rowsej - avatar
+ 9
Thomas I don’t believe so, unfortunately. BTW, I’m working on a syntax highlighter which could make your code look fancier!
23rd Apr 2019, 8:16 AM
Rowsej
Rowsej - avatar
+ 8
Thomas But, with that one, it counts that as HTML as well. For example, if you were explaining that you can use both <br> and <br/>, the <br/> would show only as <br>. Same with the input tag: <input/> would show as <input>. Also, If you’re showing how to use the <style> element to use CSS in your code, the styling will apply, instead of just showing the text. Same with the <script> element, the JavaScript code will evaluate. I would recommend my option, because mine has no flaws while the other one does.
23rd Apr 2019, 8:03 AM
Rowsej
Rowsej - avatar
+ 5
You can use JS to do this. The innerText can do this. See this: https://code.sololearn.com/Wm9F278364fS/?ref=app
22nd Apr 2019, 6:31 AM
Kartik
Kartik - avatar
+ 3
You can wrap the text in span tags.
23rd Apr 2019, 6:46 AM
Sanjay Kamath
Sanjay Kamath - avatar
+ 3
Kartik Krishnan, your solution involves me manually typing in each code that I want to include, into the JS itself which is difficult in the long run. If there was a way to use the JS to find and replace all '<'s in a div with '&lt:', then itll be better👍🏼 I think Rowsej's solution is the most sustainable in the long run
23rd Apr 2019, 7:13 AM
Trigger
Trigger - avatar
+ 3
Kartik Krishnan Yeessss!!! Thats what Ive been looking for🔥🔥🔥
23rd Apr 2019, 7:53 AM
Trigger
Trigger - avatar
+ 3
Thank everyone for helping me and suggesting solutions to this problem😌😁☕ I really appreciate it🔥
23rd Apr 2019, 8:01 AM
Trigger
Trigger - avatar
+ 2
Use comment <!-- -->
23rd Apr 2019, 1:19 AM
Sanjay Kamath
Sanjay Kamath - avatar
+ 2
Sanjay Kamath, the span tags are placeholders for other formatting. If I put <b>hello</b> between two spans, itll still be bold and not show the tags
23rd Apr 2019, 6:49 AM
Trigger
Trigger - avatar
+ 2
Thomas what about my solution?
23rd Apr 2019, 7:04 AM
Kartik
Kartik - avatar
+ 2
Rowsej Hmm your right🤔 problem is your code is in a tag, while his is in a div, which is what I like more. Is it possible to alter your code to work with a div-class like Kartik Krishnan? Ill look into it myself as well
23rd Apr 2019, 8:15 AM
Trigger
Trigger - avatar
+ 2
Rowsej CSS does not apply. See the updated one.
23rd Apr 2019, 8:40 AM
Kartik
Kartik - avatar
+ 2
Thomas Glad I could help. 😄
23rd Apr 2019, 8:41 AM
Kartik
Kartik - avatar
+ 2
Kartik Krishnan, I think Rowsej is talking about the actual style tag, the one you put into the head-section. Ill check out to see if it applies as well It does not, which makes it valid👍🏼
23rd Apr 2019, 8:45 AM
Trigger
Trigger - avatar
+ 2
Thomas Style tag works too. See updated. 1st one displays while other one executes
23rd Apr 2019, 8:48 AM
Kartik
Kartik - avatar
+ 2
Kartik Krishnan Thanks, so far your solution works the best then
23rd Apr 2019, 8:53 AM
Trigger
Trigger - avatar
+ 2
And in case you need indentation i.e. spacing too, use white-space: pre-wrap for that class in CSS. https://code.sololearn.com/W1gOde1sjWVh/?ref=app
23rd Apr 2019, 8:58 AM
Kartik
Kartik - avatar