3

Actually I need to a div (an environment like IDE) for showing some code. exactly like stackoverflow when I write 4 space in back of the line:

Now I can see tags <span>, <p>, <div>, etc ... in the browser

Anyway, how can I print a <tag> in the screen? (without translating by browser)

In other word, how can I see <span> in the output in this fiddle?

stack
  • 10,280
  • 19
  • 65
  • 117
  • In an IDE, you would click on "Source". I'm not sure I understand what you want. – Mr Lister Oct 10 '15 at 15:44
  • @MrLister no no, I just want to `print('
    ')` in the page, when I do that, browser will translates it and I can not see it ...
     – stack Oct 10 '15 at 15:46
  • If you load a text file (that is, not an HTML file) into a browser, it will be displayed as plain text. – Mr Lister Oct 10 '15 at 15:48
  • Why don't you want to encode the text? – Paul Kienitz Oct 10 '15 at 15:48
  • @MrLister actually my website is about programming, and I need to print some code in the page, but when I write them in the HTML code, user can not see it, because they will be translate. look at stackoverflow, when I write a tag between two ` quotes, the tag will show in the page (and its backgrond will be gray). how can I do that ? – stack Oct 10 '15 at 15:50
  • @PaulKienitz I think you don't know what I want ... look, please give me a fiddle, and show a tag like `` in the output – stack Oct 10 '15 at 15:51
  • Just translate the s to >s, and don't try to fight the browser. – Paul Kienitz Oct 10 '15 at 15:53
  • maybe this will help you: http://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets – Samia Ruponti Oct 10 '15 at 15:54

2 Answers2

3

You should use the HTML Entities of html:

W3C School Html Entities

To do that, you'll have to use the special character codes < (less than) and > greater than. So your code will look lile:

<span>&lt;tag&gt;</span>

The result of this will be:

<tag>
Joan Picornell
  • 405
  • 3
  • 6
0

To get the text to appear "code like" you should put it in a <pre> tag. However, to use characters that are specific to the language you are using, you can use HTML character codes as seen here.

For instance to write a div tag and have it show up without being rendered you could write &lt;div&gt;. This will show as <div> in the browser.

&lt; will be rendered as <, and &gt; will be rendered as >.

Most code editors can do this for you if you don't want to spend the time changing each character to it's respective code. For instance, I use WebStorm and there is a plugin called "String Manipulator" that will change as much code as I want with one click of a button.

sams-serif
  • 36
  • 5
  • 1
    Thanks buddy, just using something like `<div>` is a standard thing? for example stackoverflow uses what approach for appear code? – stack Oct 10 '15 at 15:57
  • 1
    It's standard and most web programming languages provide a built in way to do it. – Paul Kienitz Oct 10 '15 at 16:07
  • That, I'm not so sure about, but I would bet not. Taking a look around now to see if there is a better option. Edit: What Paul said makes sense though. @stack – sams-serif Oct 10 '15 at 16:09