Show PHP/HTML as text on page in php template - php

Question

How can I spit out the following code as text on a page inside of 'pre' and 'code' tags without my php template actually trying to read the php code. With js and css the 'code' and 'pre' tags stop the actual code from running. How do I do this with the following combo of HTML/PHP.
I have tried using htmlescaping but this only spits out the php. I can't figure out what the right combination is here.
<pre>
<code>
<?php elseif(get_row_layout() == 'three_col_panel'): ?>
<!-- ==================================== -->
<!-- === 3 COLUMN ICON TEXT GRID ======== -->
<!-- ==================================== -->
<div class="icon-panel-three block">
<div class="main-wrap">
<div class="container">
<div class="row">
<?php if( have_rows('pillar')): ?>
<?php while ( have_rows('pillar')) : the_row() ?>
<div class="col-md-4 icon-column">
<div class="inner-content">
<?php $image = get_sub_field('image');
$url = $image['url'];
$alt = $image['alt'];
$size = 'medium';
$thumb = $image['sizes'][$size];
?>
<img src="<?= $thumb; ?>" alt="<?= $alt; ?>"/>
<div class="text">
<h1><?= get_sub_field('heading')?></h1>
<p><?= get_sub_field('paragraph')?></p>
</div><!--end text-->
<?php if( have_rows('column_link')): ?>
<?php while ( have_rows('column_link')) : the_row() ?>
<?= get_sub_field('col_link_text'); ?><img src="<?= get_template_directory_uri(); ?>/img/button-arrow.svg" alt="click here" />
<?php endwhile; ?>
<?php endif; ?>
</div><!--end inner-content-->
</div><!--end col-->
<?php endwhile; ?>
<?php endif; ?>
</div><!--end row-->
</div><!--end container-->
</div><!--end main-wrap-->
</div><!--end tile-panel-->
</code>
</pre>

Answer 1

Precondition:
Text to output must be in a variable string or in a separate file.
I suggest you the file solution: it is more simple, the code is more clear, and you can use one file to display more that one code.
If you prefer the string-way, you have to wrap it by single quotes and escape internal single quotes:
$string = '<?php elseif(get_row_layout() == \'three_col_panel\'): ?>
<!-- ==================================== -->
(...)';
You can't use double quotes, because they allow php variables evaluation.
If you prefer, you can use also Nowdoc string syntax: in this case, no escaping is needed.
Best way:
Use highlight_string( $string ) if your text is a string, or highlight_file( $filepath ) if you want output a complete file.
You don't need to wrap it by <code></code>: above commands wrap-it for you.
As gift, you will have colored syntax!
Alternative way:
For string:
<code><?php echo htmlentities( $string ); ?></code>
For files:
<code><?php echo htmlentities( file_get_contents( $filepath ) ); ?></code>

Answer 2

You just have to put all that between double quotes: "...", and escape the double quotes inside:
<div class=\"icon-panel-three block\">
<div class=\"main-wrap\">
.... etc

Answer 3

Another thing you can do is this: put it all in a .txt file and show the contents with php <?php
$homepage = file_get_contents('mycode.txt');
echo $homepage;
?>

Answer 4

with php you can try the php function "highlight_string();" like this:
<?php
highlight_string('<?php phpinfo(); ?>');
?>
It will output the ('input') as a string with colorcoding.
check out its php documentation: http://php.net/manual/en/function.highlight-string.php