Samples use of prismjs in code blocks

Here are some test cases of me using prism to add the css declaration to indicate language used.

I posted a question recently in the Perch slack chat about what would be a good syntax highlighter for sharing code on tutorials. I received three recommendations to try out Prismjs and I was glad I asked.

So as a test I created a Perch template to use in Blocks to test various code snippets. The documentation in prism says users should apply use the following syntax

<pre>
<code>
Write code here
</code>
</pre>

and apply a class on the html code snippet to indicate which language is used. Prism has options for many languages. From simple markup, to php, sass, javascript, react, python, etc.


<?php   perch_layout('footer'); ?>


// Buddhist colors
$blue: #2F57BC; // Loving kindness, peace and universal compassion
$purple: #67579F; // Royal, rare and mystical
$orange: #E46B25; //The Buddha's teachings - wisdom
$red: #E14129; // The blessings of practice - achievement, wisdom, virtue, fortune and dignity
$yellow: #EFCD43; //The middle path avoiding extremes, emptiness


$(document).ready(function(){

$(".owl-carousel").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
});

}


# This is an h1 tag in markdown
## This is a h2 tag in markdown

~~~
Between the 3 tildes is a code snippet rendered through markdown.
~~~


<perch:repeater id="carousel_images" label="Carousel Images" scope-parent="true">
<perch:before>
<div class="owl-carousel owl-carousel owl-theme">
</perch:before>
<div class="item">
  <img src="<perch:content id="carousel_image" type="image" label="Image" order="1" required="true" bucket="images" />" alt="<perch:content id="alt" type="text" label="Image description" order="2" />" />
    <perch:if exists="carousel_image_caption"><div class="owl-caption">
    <perch:content id="carousel_image_caption" title="true" type="smarttext" label="Image Caption" help="This is the caption for the image." required="false" order="3"  /></div></perch:if>
</div>
<perch:after>
</div>
</perch:after>
</perch:repeater>


<pre>
<code class="<perch:content id="code-snippet" type="select" options="Markup|language-markup,CSS|language-css,JavaScript|language-javascript,SCSS|language-scss,PHP|language-php,Markdown|language-markdown,Git|language-git,Python|language-python,React JSX|lanugage-jsx" label="Kind of code snippet" help="Select from the options what kind of code snippet this is so we can target an approate css selector." allowempty="true"  />">
<perch:content id="textarea" type="textarea" label="Code" html="false" markdown="false" size="l" />
</code>
</pre>

Posted