Use prism as smaller nicer code highlighting library

app/assets/stylesheets/application.css.scss

@@ -28,7 +28,7 @@ $weight-bold: 400;
 
 @import "checkmark-icon";
 @import 'demo';
-@import 'highlight';
+@import 'prism';
 
 .field_with_errors input {
   border-color: $red;

app/assets/stylesheets/highlight.css.scss

@@ -1,5 +0,0 @@
-code.html .hljs-tag:first-child .hljs-attr, code.html .hljs-tag:first-child .hljs-string {
-  font-weight: bold;
-  font-size: 1.2em;
-}
-

app/assets/stylesheets/prism.css.scss

@@ -0,0 +1,131 @@
+/* PrismJS 1.20.0
+https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=custom-class */
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code.language-html > .prism-tag:first-child {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.prism-token.prism-comment,
+.prism-token.prism-prolog,
+.prism-token.prism-doctype,
+.prism-token.prism-cdata {
+	color: slategray;
+}
+
+.prism-token.prism-punctuation {
+	color: #f8f8f2;
+}
+
+.prism-token.prism-namespace {
+	opacity: .7;
+}
+
+.prism-token.prism-property,
+.prism-token.prism-tag,
+.prism-token.prism-constant,
+.prism-token.prism-symbol,
+.prism-token.prism-deleted {
+	color: #f92672;
+}
+
+.prism-token.prism-boolean,
+.prism-token.prism-number {
+	color: #ae81ff;
+}
+
+.prism-token.prism-selector,
+.prism-token.prism-attr-name,
+.prism-token.prism-string,
+.prism-token.prism-char,
+.prism-token.prism-builtin,
+.prism-token.prism-inserted {
+	color: #a6e22e;
+}
+
+.prism-token.prism-operator,
+.prism-token.prism-entity,
+.prism-token.prism-url,
+.prism-language-css .prism-token.prism-string,
+.prism-style .prism-token.prism-string,
+.prism-token.prism-variable {
+	color: #f8f8f2;
+}
+
+.prism-token.prism-atrule,
+.prism-token.prism-attr-value,
+.prism-token.prism-function,
+.prism-token.prism-class-name {
+	color: #e6db74;
+}
+
+.prism-token.prism-keyword {
+	color: #66d9ef;
+}
+
+.prism-token.prism-regex,
+.token.important {
+	color: #fd971f;
+}
+
+.prism-token.prism-important,
+.prism-token.prism-bold {
+	font-weight: bold;
+}
+.prism-token.prism-italic {
+	font-style: italic;
+}
+
+.prism-token.prism-entity {
+	cursor: help;
+}
+

app/javascript/highlight.js

@@ -1,7 +0,0 @@
-document.addEventListener("turbolinks:load", function () {
-  document.querySelectorAll('pre code').forEach(function (block) {
-    if (window.hljs) {
-      hljs.highlightBlock(block);
-    }
-  });
-});

app/javascript/packs/application.js

@@ -13,7 +13,7 @@ require('tinyforms');
 require('demo');
 require('backend_typed');
 require('tabs');
-require('highlight');
+require('prism');
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/views/forms/setup.html.erb

@@ -42,7 +42,7 @@
       <p>
         Please set your form action as in the example below. Make sure to use proper <code>name</code> attributes.
       <p>
-      <pre><code class="html">
+      <pre><code class="language-html">
 <%= html_escape_once render('form_example', form: @form) %>
       </code></pre>
 
@@ -50,12 +50,9 @@
       <p>
         Learn more about our <a href="https://www.notion.so/JavaScript-Library-442071548edd4cd1af9c7d8edb3d42cb">JavaScript library</a> and our <a href="https://www.notion.so/Tinyforms-API-7862355e22ce4bbead5de3b635cda55e">API</a> in your help section.
       </p>
-      <pre><code class="html">
+      <pre><code class="language-html">
 <%= html_escape_once render('form_example_js', form: @form) %>
       </code></pre>
-
-      <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/railscasts.min.css">
-      <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
     </div>
   </div>
 

app/views/forms/show.html.erb

@@ -24,22 +24,23 @@
     <div class="columns is-centered">
       <div class="column is-two-thirds">
 
-        <h3 class="title">Setup your online form:</h3>
+        <h3 class="title">One more step:</h3>
         <p>
-          Your form submission URL: <code><%= submission_url(@form) %></code>
+          Set the <code>action</code> of your online form to <code><%= submission_url(@form) %></code> and make sure your fields have proper <code>name</code> attributes.
-        </p>
-        <p>
-          Set the <code>action</code> of your online form to this URL and make sure your fields have proper <code>name</code> attributes.
         </p>
         <h4 class="subtitle" style="margin-top:1em">Example:</h4>
-        <pre><code class="html">
+        <pre><code class="language-html">
 <%= html_escape_once render('form_example', form: @form) %>
         </code></pre>
-        <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/default.min.css">
-        <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
 
         <p>
-          Let us know if you need <%= link_to 'help', help_url %> - we also build the form for you!
+          If you prefer to submit the form using JavaScript/AJAX have a look at our <a href="https://www.notion.so/JavaScript-Library-442071548edd4cd1af9c7d8edb3d42cb">JavaScript library</a> and our <a href="https://www.notion.so/Tinyforms-API-7862355e22ce4bbead5de3b635cda55e">API</a>.
+        </p>
+        <p>
+          If you need help, <%= link_to "we're here!", help_url %>
+        </p>
+        <p style="margin-top:15px">
+          And if you do not want to deal with your form at all, have a look at our <%= link_to 'form building service', form_building_service_url %>.
         </p>
 
       </div>

config/routes.rb

@@ -29,7 +29,7 @@ Rails.application.routes.draw do
   get '/demo(/:backend)' => 'home#demo', as: :demo
   get '/contact' => 'home#contact', as: :contact
   get '/help', to: redirect('https://www.notion.so/Tinyforms-Help-Center-04f13b5908bc46cfb4283079a3cb1149')
-
+  get '/form-building-service', to: redirect('https://www.notion.so/Tinyforms-Help-Center-04f13b5908bc46cfb4283079a3cb1149')
 
   root 'home#index'
 end