How to write code as an example, without running?

Asked

Viewed 6,072 times

20

I’m doing the translation of a book to an HTML page, ai in the book has the codes, but how do I make my HTML display my code, HTML, PHP and Javascript, without running them?

php javascript html

  • Where are you making this text? pure HTML? Some framework for blogs like wordpress, for example?

  • Here is a website to help you modify html for text: http://blogcrowds.com/resources/parse_html.php

  • If you use jQuery you can do this $('pre').text( $('pre').html() );.

4 answers

19


You need to escape the characters that make your tags interpreted as HTML, the < and the >.

For example, instead of:

<div>Teste</div>

use:

&lt;div&gt;Teste&lt;/div&gt;

If you are using PHP, there is a function that does this, the htmlentities:

echo htmlentities('<div>Teste</div>');

http://ideone.com/DEZduB

In the case of PHP code, just exit it without the <?php and it will not be interpreted. If you want to include the <?php in the example, use &lt;?php.

  • 2

    I thought to indicate some plugin that shows codes, like this: http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/

  • That’s how it works super well. I use the Highligth.js plugin to display the codes but it runs with the tags < > <?, but with &lt &gt &lt? it does not run and shows the code. Thank you (:

  • If you use jQuery you can do this $('pre').text( $('pre').html() );

  • i can also do so: &ltli>. Change the first "<" that the browser will not render, it is much faster (:.

  • Kaduamaral - this will write what is inside the <pre> tag as html code, without running?

  • 1

    Yes @Estáciodifabio, jQuery will take html $('pre').html() and turn into text $('pre').text(). The tag pre, respects "everything" inside it, in the case of whitespace (no need to use &nbsp;) and line breaks (no need to use <br>).

Show 1 more comment

13

You can use it

<xmp>
  <p>Blah teste</p>
</xmp>

The xmp tag does not need to use escape characters. The result will be:

<p>Blah teste</p>
  • 3

    Interesting that, I didn’t know. However I found documentation saying that is an obsolete resource that can be removed from browsers.

  • Yes, it can be discontinued in the future, but for now it is the simplest solution. A pity to be obsolete. =)

  • It is not the simplest solution the site itself talks to use <pre> or <code>

  • I’d give +1 but with these comments I can’t. I didn’t know it either.

  • 2

    this is a great technique, but within the <pre> <code> <xmp> <p> olar world </p> </xmp> </pre> </code>. The browser renders all the code behind the <pre> and <code>. But if it’s only for pure HTML, it works great. Too bad it’s obsolete.

  • <pre> or <code> do not work in this case @Adirkuhn

  • 1

    @Renarosantos I drew, but even obsolete is a great tip, also not known (+1)

Show 2 more comments

5

You can use the tag pre and jQuery:

jQuery(document).ready(function($) {
   $('pre').each(function(index, el){
     $(this).text( $(this).html() );
   });
});
pre{
  background-color: rgba(0,0,0,0.08);
  border-left: 3px solid rgba(0,0,0,0.4);
  margin: 0;
  padding: 4px 6px;
}

pre.php::before{
  content: '<?php';
  display:block;
  margin:0 0 2px -3px;
}
pre.php::after{
  content: '?>';
  display:block;
  margin:2px 0 0 -3px;
}

hr{margin 7px 0; border-color: #999;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre>
   <p>
      Teste da tag 
      <strong>pre</strong>
   </p>
</pre>
<hr>
<pre class="php">
   $var = 'Hello World!';
   
   if (1 == 1)
     echo $var;
</pre>

But in the case of PHP, if you are also using it on the server side, you have to omit the opening tag <?php (can issue it via CSS).

-3

I fell here first because I had the same doubt "how to display php on the page without running". It turned out that I did not like the solutions proposed here and I was doing tests on my own and the solution could not be simpler. Just give an 'ECHO' in the PHP content you want to display, example:

<?php 
  echo "
    <?php 
      function teste(valor) {
        alert(valor);
      }
      //Chamando a função 
      teste('Deu certo');
    ?>
  ";
?>

I hope it’s useful, hugs

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.