Tailwind CSS Prism - Versoly UI

Added in 1.0

Examples

<pre class="language-html"><code data-toggle="prism">&lt;section class="py-24 bg-primary-50 bg-gradient-to-br to-secondary-100 from-primary-100">
  &lt;div class="container">
    &lt;div class="row md:justify-center mb-10">
      &lt;div class="col relative md:w-9/12 text-center lg:w-8/12">
        &lt;h1 class="display-6 font-semibold text-gray-900">
          All the features you need to build
          &lt;span class="d-inline-block inline-block bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent">
            faster
          &lt;/span>
        &lt;/h1>
      &lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/section></code></pre>

Line numbers

To add line numbers to Prism add line-numbers to pre class name.

<pre class="language-html line-numbers"><code data-toggle="prism">&lt;section class="py-24 bg-primary-50 bg-gradient-to-br to-secondary-100 from-primary-100">
  &lt;div class="container">
    &lt;div class="row md:justify-center mb-10">
      &lt;div class="col relative md:w-9/12 text-center lg:w-8/12">
        &lt;h1 class="display-6 font-semibold text-gray-900">
          All the features you need to build
          &lt;span class="d-inline-block inline-block bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent">
            faster
          &lt;/span>
        &lt;/h1>
      &lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/section></code></pre>

Theme

To add a custom theme to Prism add window.vPrismTheme with the theme you want inside a script tag anywhere on the page or site.

<script>window.vPrismTheme = 'night-owl';</script>
<pre class="language-html line-numbers"><code data-toggle="prism">&lt;section class="py-24 bg-primary-50 bg-gradient-to-br to-secondary-100 from-primary-100">
  &lt;div class="container">
    &lt;div class="row md:justify-center mb-10">
      &lt;div class="col relative md:w-9/12 text-center lg:w-8/12">
        &lt;h1 class="display-6 font-semibold text-gray-900">
          All the features you need to build
          &lt;span class="d-inline-block inline-block bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent">
            faster
          &lt;/span>
        &lt;/h1>
      &lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/section></code></pre>