Looking for instructions to post HTML code....

[Rich Leach]

Working on a project where I need to post HTML/CSS/JS and Coldfusion code - as I typed it - for display on a web page. 

I would like my finished web page to look like the page in the sample (https://rawgit.com/google/code-prettify/master/examples/quine.html). Unfortunately at the moment I'm getting my page's output with the HTML actually rendering, instead of getting the tags and associated code displayed.

In my actual web page using js-code-prettifier I'm using this code:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&lang=html&skin=default"></script>

<style>

li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8 {

  list-style-type: decimal !important;

}

</style>

<div>

<pre class="prettyprint lang-html linenums">

<div id="app">

<!--displaying Vue object like this is called "string interpolation"-->

<h2>{{msg}}</h2> 

</div>

</pre>

</div>

Can anyone direct me how I should markup my code to display the actual code instead of rendering the HTML output?

Thanks in advance,

Rich

[Mike Samuel]

On Mon, Jun 26, 2017 at 2:20 PM, Rich Leach <ri...@peaktopeakhosting.com> wrote:
> Working on a project where I need to post HTML/CSS/JS and Coldfusion code -
> as I typed it - for display on a web page.

Syntax highlighting in an editor is not something that prettify was
written to support.

https://stackoverflow.com/questions/1619167/textarea-that-can-do-syntax-highlighting-on-the-fly
might be worth a look.

> I would like my finished web page to look like the page in the sample
> (https://rawgit.com/google/code-prettify/master/examples/quine.html).
> Unfortunately at the moment I'm getting my page's output with the HTML
> actually rendering, instead of getting the tags and associated code
> displayed.
>
> In my actual web page using js-code-prettifier I'm using this code:
>
> <script
> src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&lang=html&skin=default"></script>
> <style>
> li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8 {
> list-style-type: decimal !important;
> }
> </style>
> <div>
> <pre class="prettyprint lang-html linenums">
> <div id="app">
> <!--displaying Vue object like this is called "string interpolation"-->
> <h2>{{msg}}</h2>
> </div>
> </pre>
> </div>
>
> Can anyone direct me how I should markup my code to display the actual code
> instead of rendering the HTML output?

This looks like a problem with Vue. A quick search suggests that if
the HTML comes from a trusted source then I think you can use
https://vuejs.org/v2/guide/syntax.html#Raw-HTML

Once you've got that working, I think you will still need to get the
content to re-prettify after changes. You'll probably need to use
prettify.js instead of run_prettify so that you can programatically
reprettify div#app.

[Mike Samuel]

On Mon, Jun 26, 2017 at 3:43 PM, Rich Leach <ri...@peaktopeakhosting.com> wrote:
> Mike
>
> ... thanks so much for your input.
>
> I could always hard code the Vue.js elements of code, but I'm still
> wondering how that sample that was posted with the source code is working?
> It's hard to tell what's pre and post processed by inspecting it....
> https://rawgit.com/google/code-prettify/master/examples/quine.html

The source for that example is browseable at
https://github.com/google/code-prettify/blob/master/examples/quine.html

[Rich Leach]

Mike

... thanks so much for your input.

I could always hard code the Vue.js elements of code, but I'm still wondering how that sample that was posted with the source code is working? It's hard to tell what's pre and post processed by inspecting it....  https://rawgit.com/google/code-prettify/master/examples/quine.html

On Monday, June 26, 2017 at 12:53:43 PM UTC-6, Mike Samuel wrote: