improve docs readability (#1310)
* improve docs readability * update prism
This commit is contained in:
Shawn Erquhart
GitHub
parent
ea338ba51f
commit
03faa28a41
@ -46,5 +46,6 @@ module.exports = {
|
||||
mobile: '480px',
|
||||
tablet: '768px',
|
||||
desktop: '960px',
|
||||
display: '1200px'
|
||||
display: '1200px',
|
||||
xlarge: '1280px'
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ If your generator isn't listed here, you can check its documentation, or as a sh
|
||||
|
||||
Inside the `admin` folder, you'll create two files:
|
||||
|
||||
```
|
||||
```x
|
||||
admin
|
||||
├ index.html
|
||||
└ config.yml
|
||||
@ -57,13 +57,13 @@ The second file, `admin/config.yml`, is the heart of your Netlify CMS installati
|
||||
|
||||
You can also use Netlify CMS as an npm module. Wherever you import Netlify CMS, it will automatically run, taking over the current page. Make sure the script that imports it is only run on your CMS page. First install the package and save it to your project:
|
||||
|
||||
```
|
||||
```bash
|
||||
npm install netlify-cms --save
|
||||
```
|
||||
|
||||
Then import it (assuming your project has tooling for imports):
|
||||
|
||||
```
|
||||
```js
|
||||
import CMS from 'netlify-cms'
|
||||
|
||||
// Now the registry is available via the CMS object.
|
||||
|
||||
@ -76,7 +76,7 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);
|
||||
|
||||
Register a block level component for the Markdown editor:
|
||||
|
||||
```
|
||||
```js
|
||||
CMS.registerEditorComponent(definition)
|
||||
```
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -56,7 +56,7 @@ h3 > p {
|
||||
}
|
||||
|
||||
p, ul {
|
||||
font-size: $tiny;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -142,6 +142,7 @@ ul {
|
||||
|
||||
pre {
|
||||
border-radius: $borderRadius;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.code,
|
||||
@ -149,4 +150,5 @@ code {
|
||||
font-family: 'Roboto Mono', monospace !important;
|
||||
font-size: 14px;
|
||||
text-transform: none;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
@ -113,6 +113,10 @@
|
||||
margin-top: $large;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $darkGreen;
|
||||
@ -144,6 +148,16 @@
|
||||
padding: initial;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 30px -16px !important;
|
||||
}
|
||||
|
||||
@media (min-width: $xlarge) {
|
||||
pre {
|
||||
margin-right: -120px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -163,23 +177,10 @@
|
||||
|
||||
h3 {
|
||||
color: $grey;
|
||||
font-size: 12px;
|
||||
font-weight: $semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
margin-top: $medium;
|
||||
font-size: 20px;
|
||||
margin-top: $large;
|
||||
margin-bottom: $small;
|
||||
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
width: $small;
|
||||
height: 2px;
|
||||
background: $darkGreen;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -1,178 +1,121 @@
|
||||
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+ruby+git+go+json+jsx+yaml&plugins=line-numbers */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
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;
|
||||
color: #ccc;
|
||||
background: none;
|
||||
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;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
-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;
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.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.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre.line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
|
||||
pre.line-numbers > code {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user