From d37a8e0111e7cc5c70e751d6c13492557900ac5f Mon Sep 17 00:00:00 2001 From: Mathieu Rochette Date: Tue, 22 Nov 2016 23:07:58 +0100 Subject: [PATCH 1/2] add syntax highlighting for json examples closes #49 --- _includes/head.html | 4 +- _sass/minima.scss | 2 +- _sass/minima/_base.scss | 1 - _sass/minima/_syntax-highlighting.scss | 71 ------------- _sass/minima/prism.scss | 139 +++++++++++++++++++++++++ example1.html | 32 +++--- example2.html | 40 +++---- examples.html | 4 +- index.html | 8 +- js/prism.js | 4 + 10 files changed, 187 insertions(+), 118 deletions(-) delete mode 100644 _sass/minima/_syntax-highlighting.scss create mode 100644 _sass/minima/prism.scss create mode 100644 js/prism.js diff --git a/_includes/head.html b/_includes/head.html index 6bce0b92..b2dba5e3 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -11,7 +11,9 @@ - + + + {% if jekyll.environment == 'production' and site.google_analytics %} {% include google-analytics.html %} {% endif %} diff --git a/_sass/minima.scss b/_sass/minima.scss index 69ba5333..ef85635f 100644 --- a/_sass/minima.scss +++ b/_sass/minima.scss @@ -39,5 +39,5 @@ $on-laptop: 800px !default; @import "minima/base", "minima/layout", - "minima/syntax-highlighting" + "minima/prism" ; diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index 1799b1d8..17e430b7 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -132,7 +132,6 @@ code { font-size: 15px; border: 1px solid $grey-color-light; border-radius: 3px; - background-color: #eef; } code { diff --git a/_sass/minima/_syntax-highlighting.scss b/_sass/minima/_syntax-highlighting.scss deleted file mode 100644 index 8fac5977..00000000 --- a/_sass/minima/_syntax-highlighting.scss +++ /dev/null @@ -1,71 +0,0 @@ -/** - * Syntax highlighting styles - */ -.highlight { - background: #fff; - @extend %vertical-rhythm; - - .highlighter-rouge & { - background: #eef; - } - - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long -} diff --git a/_sass/minima/prism.scss b/_sass/minima/prism.scss new file mode 100644 index 00000000..73ff41c3 --- /dev/null +++ b/_sass/minima/prism.scss @@ -0,0 +1,139 @@ +/* http://prismjs.com/download.html?themes=prism&languages=json&plugins=normalize-whitespace */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + 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; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + diff --git a/example1.html b/example1.html index e70977be..86a980df 100644 --- a/example1.html +++ b/example1.html @@ -9,14 +9,14 @@

Example data

Example JSON data for a product API

An example product in this API is:

-
+

 {
     "id": 1,
     "name": "A green door",
     "price": 12.50,
     "tags": ["home", "green"]
 }
-

+

While generally straightforward, that example leaves some open questions. For example, one may ask:

@@ -34,14 +34,14 @@

Starting the schema

To start a schema definition, let's begin with a basic JSON schema:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
     "description": "A product from Acme's catalog",
     "type": "object"
 }
-

+

The above schema has four properties called keywords. @@ -64,7 +64,7 @@

What is id?

id is a numeric value that uniquely identifies a product. Since this is the canonical identifier for a product, it doesn't make sense to have a product without one, so it is required.

In JSON Schema terms, we can update our schema to:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -78,13 +78,13 @@ 
What is id?

     },
     "required": ["id"]
 }
-

+

Is name required?

name is a string value that describes a product. Since there isn't much to a product without a name, it also is required. Adding this gives us the schema:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -102,12 +102,12 @@ 
Is name required?

     },
     "required": ["id", "name"]
 }
-

+

Can price be 0?

According to Acme's docs, there are no free products. In JSON schema a number can have a minimum. By default this minimum is inclusive, so we need to specify exclusiveMinimum. Therefore we can update our schema with price:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -130,7 +130,7 @@ 
Can price be 0?

     },
     "required": ["id", "name", "price"]
 }
-

+

Are all tags strings?

Finally, we come to the tags property. Unlike the previous @@ -148,7 +148,7 @@

Are all tags strings?

The first constraint can be added with minItems, and the second one by specifying uniqueItems as being true:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -179,7 +179,7 @@ 
Are all tags strings?

     },
     "required": ["id", "name", "price"]
 }
-

+

Summary

@@ -189,7 +189,7 @@

Summary

And also, since JSON Schema defines a reference schema for a geographic location, instead of coming up with our own, we'll reference the canonical one.

Set of products:

-
+

 [
     {
         "id": 2,
@@ -221,10 +221,10 @@ 
Set of products:

         }
     }
 ]
-

+

Set of products schema:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product set",
@@ -270,6 +270,6 @@ 
Set of products schema:

         "required": ["id", "name", "price"]
     }
 }
-

+
diff --git a/example2.html b/example2.html index daad1d91..292574ec 100644 --- a/example2.html +++ b/example2.html @@ -10,7 +10,7 @@

Purpose

An entry in the fstab file can have many different forms. Here is a possible representation of a full fstab:

-
+

 {
     "/": {
         "storage": {
@@ -42,7 +42,7 @@ 
Purpose

         }
     }
 }
-

+

Not all constraints to an fstab file can be modeled using JSON Schema alone; however, it can already represent a good number of them. We will add constraints one after the other until we get to @@ -62,7 +62,7 @@

Base schema

We also want the schema to be regarded as a draft v4 schema, we must therefore specify $schema:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "type": "object",
@@ -75,7 +75,7 @@ 
Base schema

     "additionalProperties": false,
     "required": [ "/" ]
 }
-

+

Note how the valid paths constraint is enforced here:

@@ -100,7 +100,7 @@

The entry schema - starting out

Here again we will proceed step by step. We will start with the global structure of our schema, which will be as such:

-
+

 {
     "id": "http://some.site.somewhere/entry-schema#",
     "$schema": "http://json-schema.org/draft-04/schema#",
@@ -125,7 +125,7 @@ 
The entry schema - starting out

         "tmpfs": {}
     }
 }
-

+

You should already be familiar with some of the constraints:

@@ -167,7 +167,7 @@

The entry schema - adding constraints

With these added constraints, the schema now looks like this:

-
+

 {
     "id": "http://some.site.somewhere/entry-schema#",
     "$schema": "http://json-schema.org/draft-04/schema#",
@@ -202,7 +202,7 @@ 
The entry schema - adding constraints

         "tmpfs": {}
     }
 }
-

+

For now, all definitions are empty (an empty JSON Schema validates all instances). We will write schemas for individual definitions below, and fill these schemas into the entry schema.

@@ -214,7 +214,7 @@

The diskDevice storage type

only be disk, and the device must be an absolute path starting with /dev. No other properties are allowed:

-
+

 {
     "properties": {
         "type": { "enum": [ "disk" ] },
@@ -226,7 +226,7 @@ 
The diskDevice storage type

     "required": [ "type", "device" ],
     "additionalProperties": false
 }
-

+

You will have noted that we need not specify that type must be a string: the constraint described by enum is enough.

@@ -238,7 +238,7 @@

The diskUUID storage type

This storage type has two required properties, type and label. The type can only be disk, and the label must be a valid UUID. No other properties are allowed:

-
+

 {
     "properties": {
         "type": { "enum": [ "disk" ] },
@@ -250,7 +250,7 @@ 
The diskUUID storage type

     "required": [ "type", "label" ],
     "additionalProperties": false
 }
-

+

The nfs storage type

@@ -262,7 +262,7 @@

The nfs storage type

For the constraints on server, we use a new keyword: format. While it is not required that format be supported, we will suppose that it is here:

-
+

 {
     "properties": {
         "type": { "enum": [ "nfs" ] },
@@ -282,7 +282,7 @@ 
The nfs storage type

     "required": [ "type", "server", "remotePath" ],
     "additionalProperties": false
 }
-

+

The tmpfs storage type

@@ -291,7 +291,7 @@

The tmpfs storage type

only be an integer. What is more, we will require that the size be between 16 and 512, inclusive:

-
+

 {
     "properties": {
         "type": { "enum": [ "tmpfs" ] },
@@ -304,7 +304,7 @@ 
The tmpfs storage type

     "required": [ "type", "sizeInMB" ],
     "additionalProperties": false
 }
-

+

The full entry schema

@@ -312,7 +312,7 @@

The full entry schema

The resulting schema is quite large:


-
+

 {
     "id": "http://some.site.somewhere/entry-schema#",
     "$schema": "http://json-schema.org/draft-04/schema#",
@@ -396,7 +396,7 @@ 
The full entry schema

         }
     }
 }
-

+

Plugging this into our main schema

@@ -404,7 +404,7 @@

Plugging this into our main schema

Now that all possible entries have been described, we can refer to the entry schema from our main schema. We will, again, use a JSON Reference here:

-
+

 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "type": "object",
@@ -417,7 +417,7 @@ 
Plugging this into our main schema

     "additionalProperties": false,
     "required": [ "/" ]
 }
-

+

Wrapping up

diff --git a/examples.html b/examples.html index 6b78931b..cde40e65 100644 --- a/examples.html +++ b/examples.html @@ -5,7 +5,7 @@

Basic example

Here is a basic example of a JSON Schema: -

+

 {
 	"title": "Example Schema",
 	"type": "object",
@@ -24,7 +24,7 @@ 
Basic example

 	},
 	"required": ["firstName", "lastName"]
 }
-

+

Walkthroughs

diff --git a/index.html b/index.html index e03e8870..cd6b5019 100644 --- a/index.html +++ b/index.html @@ -37,15 +37,11 @@

Quickstart

The most basic schema is a blank JSON object, which constrains nothing, allows anything, and describes nothing:

-
{}
-
-
+
{}

You can apply constraints on an instance by adding validation keywords to the schema. For instance, the "type" keyword can be used to restrict an instance to an object, array, string, number, boolean, or null:

-
{ "type": "string" }
-
-
+
{"type": "string"}

JSON Schema is hypermedia ready, and ideal for annotating your existing JSON-based HTTP API. JSON Schema documents are identified by URIs, which can be used in HTTP Link headers, and inside JSON Schema documents to allow recursive definitions.

diff --git a/js/prism.js b/js/prism.js new file mode 100644 index 00000000..1c4e252d --- /dev/null +++ b/js/prism.js @@ -0,0 +1,4 @@ +/* http://prismjs.com/download.html?themes=prism&languages=json&plugins=normalize-whitespace */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,A=m,P=y,j=r.length;j>A&&_>P;++A)P+=r[A].length,w>=P&&(++m,y=P);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,P),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,O=v.slice(0,w),x=v.slice(_),S=[m,k];O&&S.push(O);var N=new a(l,g?n.tokenize(b,g):b,d,b,h);S.push(N),x&&S.push(x),Array.prototype.splice.apply(r,S)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.json={property:/"(?:\\.|[^|"])*"(?=\s*:)/gi,string:/"(?!:)(?:\\.|[^|"])*"(?!:)/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?)\b/g,punctuation:/[{}[\]);,]/g,operator:/:/g,"boolean":/\b(true|false)\b/gi,"null":/\bnull\b/gi},Prism.languages.jsonp=Prism.languages.json; +!function(){function e(e){this.defaults=r({},e)}function n(e){return e.replace(/-(\w)/g,function(e,n){return n.toUpperCase()})}function t(e){for(var n=0,t=0;tn&&(o[s]="\n"+o[s],a=l)}r[i]=o.join("")}return r.join("\n")}},Prism.plugins.NormalizeWhitespace=new e({"remove-trailing":!0,"remove-indent":!0,"left-trim":!0,"right-trim":!0}),Prism.hooks.add("before-sanity-check",function(e){var n=e.element.parentNode,t=/\bno-whitespace-normalization\b/;if(!(!e.code||!n||"pre"!==n.nodeName.toLowerCase()||e.settings&&e.settings["whitespace-normalization"]===!1||t.test(n.className)||t.test(e.element.className))){for(var r=n.childNodes,i="",o="",a=!1,s=Prism.plugins.NormalizeWhitespace,l=0;l Date: Thu, 19 Jan 2017 16:25:05 +0000 Subject: [PATCH 2/2] Replaced theme with solarized light Personal preference, and also the theme is designed for max readability. --- _sass/minima/prism.scss | 84 +++++++++++++++++++++++------------------ 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/_sass/minima/prism.scss b/_sass/minima/prism.scss index 73ff41c3..06937f22 100644 --- a/_sass/minima/prism.scss +++ b/_sass/minima/prism.scss @@ -1,21 +1,44 @@ -/* http://prismjs.com/download.html?themes=prism&languages=json&plugins=normalize-whitespace */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ +/* http://prismjs.com/download.html?themes=prism-solarizedlight&languages=json&plugins=normalize-whitespace */ +/* + Solarized Color Schemes originally by Ethan Schoonover + http://ethanschoonover.com/solarized + + Ported for PrismJS by Hector Matos + Website: https://krakendev.io + Twitter Handle: https://twitter.com/allonsykraken) +*/ + +/* +SOLARIZED HEX +--------- ------- +base03 #002b36 +base02 #073642 +base01 #586e75 +base00 #657b83 +base0 #839496 +base1 #93a1a1 +base2 #eee8d5 +base3 #fdf6e3 +yellow #b58900 +orange #cb4b16 +red #dc322f +magenta #d33682 +violet #6c71c4 +blue #268bd2 +cyan #2aa198 +green #859900 +*/ code[class*="language-"], pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; + color: #657b83; /* base00 */ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; + line-height: 1.5; -moz-tab-size: 4; @@ -30,21 +53,12 @@ pre[class*="language-"] { pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; + background: #073642; /* base02 */ } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } + background: #073642; /* base02 */ } /* Code blocks */ @@ -52,29 +66,29 @@ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; + border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f5f2f0; + background-color: #fdf6e3; /* base3 */ } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; - white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: #93a1a1; /* base1 */ } .token.punctuation { - color: #999; + color: #586e75; /* base01 */ } .namespace { @@ -88,7 +102,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #905; + color: #268bd2; /* blue */ } .token.selector, @@ -96,33 +110,30 @@ pre[class*="language-"] { .token.string, .token.char, .token.builtin, +.token.url, .token.inserted { - color: #690; + color: #2aa198; /* cyan */ } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); +.token.entity { + color: #657b83; /* base00 */ + background: #eee8d5; /* base2 */ } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: #859900; /* green */ } .token.function { - color: #DD4A68; + color: #b58900; /* yellow */ } .token.regex, .token.important, .token.variable { - color: #e90; + color: #cb4b16; /* orange */ } .token.important, @@ -136,4 +147,3 @@ pre[class*="language-"] { .token.entity { cursor: help; } -