From add4a2f7f091b7d1654fbf6a8ea75a183258573a Mon Sep 17 00:00:00 2001 From: Michael Bumann Date: Mon, 27 Apr 2020 19:14:44 +0200 Subject: [PATCH] Use prism as smaller nicer code highlighting library --- app/assets/stylesheets/application.css.scss | 2 +- app/assets/stylesheets/highlight.css.scss | 5 - app/assets/stylesheets/prism.css.scss | 131 ++++++++++++++++++++ app/javascript/highlight.js | 7 -- app/javascript/packs/application.js | 2 +- app/javascript/prism.js | 17 +++ app/views/forms/setup.html.erb | 7 +- app/views/forms/show.html.erb | 19 +-- config/routes.rb | 2 +- 9 files changed, 163 insertions(+), 29 deletions(-) delete mode 100644 app/assets/stylesheets/highlight.css.scss create mode 100644 app/assets/stylesheets/prism.css.scss delete mode 100644 app/javascript/highlight.js create mode 100644 app/javascript/prism.js diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index c19aef5..e13e405 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/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; diff --git a/app/assets/stylesheets/highlight.css.scss b/app/assets/stylesheets/highlight.css.scss deleted file mode 100644 index 87e256f..0000000 --- a/app/assets/stylesheets/highlight.css.scss +++ /dev/null @@ -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; -} - diff --git a/app/assets/stylesheets/prism.css.scss b/app/assets/stylesheets/prism.css.scss new file mode 100644 index 0000000..00a575a --- /dev/null +++ b/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; +} + diff --git a/app/javascript/highlight.js b/app/javascript/highlight.js deleted file mode 100644 index e48cb54..0000000 --- a/app/javascript/highlight.js +++ /dev/null @@ -1,7 +0,0 @@ -document.addEventListener("turbolinks:load", function () { - document.querySelectorAll('pre code').forEach(function (block) { - if (window.hljs) { - hljs.highlightBlock(block); - } - }); -}); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 65acde0..c461d69 100644 --- a/app/javascript/packs/application.js +++ b/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' %>) diff --git a/app/javascript/prism.js b/app/javascript/prism.js new file mode 100644 index 0000000..4b7d153 --- /dev/null +++ b/app/javascript/prism.js @@ -0,0 +1,17 @@ +window.Prism = window.Prism || {}; +window.Prism.manual = true; +document.addEventListener("turbolinks:load", function () { + Prism.plugins.customClass.prefix('prism-'); + document.querySelectorAll('pre code').forEach(function (el) { + Prism.highlightElement(el); + }); +}); + +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=custom-class */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,C={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof _?new _(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/n.length)return;if(!(b instanceof _)){var x=1;if(d&&y!=t.tail.prev){g.lastIndex=k;var w=g.exec(n);if(!w)break;var A=w.index+(h&&w[1]?w[1].length:0),P=w.index+w[0].length,S=k;for(S+=y.value.length;S<=A;)y=y.next,S+=y.value.length;if(S-=y.value.length,k=S,y.value instanceof _)continue;for(var O=y;O!==t.tail&&(S"+a.content+""},!u.document)return u.addEventListener&&(C.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(C.highlight(r,C.languages[t],t)),a&&u.close()},!1)),C;var e=C.util.currentScript();function t(){C.manual||C.highlightAll()}if(e&&(C.filename=e.src,e.hasAttribute("data-manual")&&(C.manual=!0)),!C.manual){var r=document.readyState;"loading"===r||"interactive"===r&&e&&e.defer?document.addEventListener("DOMContentLoaded",t):window.requestAnimationFrame?window.requestAnimationFrame(t):window.setTimeout(t,16)}return C}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0},cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var n={"included-cdata":{pattern://i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[^]*?>)(?:))*\\]\\]>|(?!)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; +!function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,lookbehind:!0,alias:"selector"}}},url:{pattern:RegExp("url\\((?:"+e.source+"|[^\n\r()]*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+e.source+")*?(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:t.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:s.languages.css}},alias:"language-css"}},t.tag))}(Prism); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript; +!function(){if("undefined"!=typeof self&&self.Prism||"undefined"!=typeof global&&global.Prism){var a,e,t="";Prism.plugins.customClass={add:function(n){a=n},map:function(s){e="function"==typeof s?s:function(n){return s[n]||n}},prefix:function(n){t=n||""}},Prism.hooks.add("wrap",function(s){if(a){var n=a({content:s.content,type:s.type,language:s.language});Array.isArray(n)?s.classes.push.apply(s.classes,n):n&&s.classes.push(n)}(e||t)&&(s.classes=s.classes.map(function(n){return t+(e?e(n,s.language):n)}))})}}(); diff --git a/app/views/forms/setup.html.erb b/app/views/forms/setup.html.erb index aebf6fa..cbdd1b0 100644 --- a/app/views/forms/setup.html.erb +++ b/app/views/forms/setup.html.erb @@ -42,7 +42,7 @@

Please set your form action as in the example below. Make sure to use proper name attributes.

- 


+      

 <%= html_escape_once render('form_example', form: @form) %>
       

 
@@ -50,12 +50,9 @@
       

         Learn more about our JavaScript library and our API in your help section.
       

-      

+      

 <%= html_escape_once render('form_example_js', form: @form) %>
       

-
-      
-      
     
   
 
diff --git a/app/views/forms/show.html.erb b/app/views/forms/show.html.erb
index 1f2270d..49afb24 100644
--- a/app/views/forms/show.html.erb
+++ b/app/views/forms/show.html.erb
@@ -24,22 +24,23 @@
     

       

 
-        
Setup your online form:

+        
One more step:

         

-          Your form submission URL: <%= submission_url(@form) %>
-        

-        

-          Set the action of your online form to this URL and make sure your fields have proper name attributes.
+          Set the action of your online form to <%= submission_url(@form) %> and make sure your fields have proper name attributes.
         

         
Example:

-        

+        

 <%= html_escape_once render('form_example', form: @form) %>
         

-        
-        
 
         

-          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 JavaScript library and our API.
+        

+        

+          If you need help, <%= link_to "we're here!", help_url %>
+        

+        

+          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 %>.
         

 
       

diff --git a/config/routes.rb b/config/routes.rb
index 832d680..7975fcf 100644
--- a/config/routes.rb
+++ b/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