Webslides Syntax Highlighting with Prism

Download and unpack the Webslides bundle. Then go to Prism's download page to customize your build - choosing the theme, the languages you need support for, and optionally any plugins. Download prism.js and prism.css.

Webslides comes with a default index.html, include the Prism assets in it, then mark up your code samples using

<pre class="language-clojure"><code>(println "Hello wold")</code></pre>

Replace clojure with the language of your choice (make sure you enabled support for them when you downloaded Prism).

There is a demo. Its full source is on Github. Below is the essential parts of the HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Webslides Pygments Demo</title>
    <meta name="description" content="Syntax highlighting Webslides with Pygments">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
    <link rel="stylesheet" type='text/css' media='all' href="static/css/prism.css">
  </head>
  <body>
    <main role="main">
      <article id="webslides" class="vertical">
        <section>
          <span class="background"></span>
          <div class="wrap aligncenter">
            <h1><strong>Webslides with Pygments</strong></h1>
            <p><a href="/webslides-syntax-highlighting/">Read the post</a></p>
          </div>
        </section>
        <section>
          <span class="background"></span>
          <div class="wrap aligncenter">
            <pre class="language-clojure"><code>(println "Hello world")</code></pre>
          </div>
        </section>
      </article>
    </main>

    <script src="static/js/prism.js"></script>
    <script src="static/js/webslides.js"></script>
    <script>
      window.ws = new WebSlides();
    </script>
  </body>
</html>

¶Webslides Syntax Highlighting with Prism