Samples use of prismjs in code blocks

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.

scss 

$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

JavaScript

$(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.
~~~

<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>

Tags:

Development