Use prism as smaller nicer code highlighting library
This commit is contained in:
parent
bc45040bb1
commit
add4a2f7f0
@ -28,7 +28,7 @@ $weight-bold: 400;
|
||||
|
||||
@import "checkmark-icon";
|
||||
@import 'demo';
|
||||
@import 'highlight';
|
||||
@import 'prism';
|
||||
|
||||
.field_with_errors input {
|
||||
border-color: $red;
|
||||
|
@ -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;
|
||||
}
|
||||
|
131
app/assets/stylesheets/prism.css.scss
Normal file
131
app/assets/stylesheets/prism.css.scss
Normal 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;
|
||||
}
|
||||
|
@ -1,7 +0,0 @@
|
||||
document.addEventListener("turbolinks:load", function () {
|
||||
document.querySelectorAll('pre code').forEach(function (block) {
|
||||
if (window.hljs) {
|
||||
hljs.highlightBlock(block);
|
||||
}
|
||||
});
|
||||
});
|
@ -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
17
app/javascript/prism.js
Normal file
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user