Use prism as smaller nicer code highlighting library

This commit is contained in:
bumi 2020-04-27 19:14:44 +02:00
parent bc45040bb1
commit add4a2f7f0
9 changed files with 163 additions and 29 deletions

View File

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

View File

@ -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;
}

View File

@ -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;
}

View File

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

View File

@ -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' %>)

17
app/javascript/prism.js Normal file

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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>
</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.
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>
<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>

View File

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