Skip to content

Commit 2d77ed8

Browse files
bradfrostbmuenzenmeyer
bradfrost
authored and
bmuenzenmeyer
committed
Add prism syntax highlighting
1 parent cebf0c9 commit 2d77ed8

File tree

6 files changed

+153
-22
lines changed

6 files changed

+153
-22
lines changed

‎packages/docs/src/docs/editing-source-files.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,24 @@ All Pattern Lab directories can be configured to suit your needs.
2222

2323
In the PHP version of Pattern Lab you can modify or add the following configuration options in `./config/config.yml`:
2424

25-
```
25+
```js
2626
// base directories
27-
exportDir: "value" // default is exports. where clean mark-up sans PL code is exported to.
28-
publicDir: "value" // default is public
29-
sourceDir: "value" // default is source
27+
exportDir: 'value'; // default is exports. where clean mark-up sans PL code is exported to.
28+
publicDir: 'value'; // default is public
29+
sourceDir: 'value'; // default is source
3030

3131
// exportDir is the base directory for the following directories (e.g. ./exports/patterns)
32-
patternExportDir: "value" // default is patterns
32+
patternExportDir: 'value'; // default is patterns
3333

3434
// publicDir is the base directory for the following directories (e.g. ./public/patterns)
35-
componentDir: "value" // default is patternlab-components. where plugin components are installed.
36-
patternPublicDir: "value" // default is patterns
35+
componentDir: 'value'; // default is patternlab-components. where plugin components are installed.
36+
patternPublicDir: 'value'; // default is patterns
3737

3838
// sourceDir is the base directory for the following directories (e.g. ./source/_patterns)
39-
annotationsDir: "value" // default is _annotations
40-
dataDir: "value" // default is _data
41-
metaDir: "value" // default is _meta
42-
patternSourceDir: "value" // default is _patterns
39+
annotationsDir: 'value'; // default is _annotations
40+
dataDir: 'value'; // default is _data
41+
metaDir: 'value'; // default is _meta
42+
patternSourceDir: 'value'; // default is _patterns
4343
```
4444

4545
In the Node version of Pattern Lab you can modify the following configuration options in `patternlab-config.json`:

‎packages/docs/src/docs/pattern-including.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,17 @@ If you need more specificity when including patterns the PHP and Node versions o
5050

5151
The default Mustache include syntax would be:
5252

53-
{% raw %}{{> 00-atoms/images/landscape-16x9 }}{% endraw %}
53+
```handlebars
54+
{% raw %}{{> 00-atoms/images/landscape-16x9 }}{% endraw %}
55+
```
5456

5557
**Important:** Unlike the shorthand include syntax the template language specific include syntax **must** include any digits used for ordering and subtype directories. Pattern paths need to be updated when either is changed for a given pattern.
5658

5759
## Examples and Gotchas
5860

5961
Here are some examples of how to include patterns as well as some gotchas.
6062

61-
```
63+
```handlebars
6264
{% raw %}// partials to match
6365
00-atoms/global/05-test.mustache
6466
00-atoms/global/06-test.mustache

‎packages/docs/src/scss/abstracts/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
* Brand Colors
4242
* 1) Brand=specific colors
4343
*/
44-
$color-brand-green: #0c9f2e;
44+
$color-brand-green: #7ec699;
4545
$color-brand-green-transparent: rgba(8, 206, 55, 0.05);
4646
$color-brand-purple-transparent: rgba(220, 193, 232, 0.2);
4747

‎packages/docs/src/scss/base/_text.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,11 @@ pre {
7373
}
7474
}
7575

76-
/**
77-
* Code with languages associated with them
78-
* 1) Override Prism sysles for code blocks with language
79-
*/
80-
code[class*='language-'],
81-
pre[class*='language-'] {
82-
font-family: monospace !important;
83-
}
76+
// /**
77+
// * Code with languages associated with them
78+
// * 1) Override Prism sysles for code blocks with language
79+
// */
80+
// code[class*='language-'],
81+
// pre[class*='language-'] {
82+
// font-family: monospace !important;
83+
// }

‎packages/docs/src/scss/style.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,8 @@
5757
#UTILITIES
5858
\*------------------------------------*/
5959
@import 'utilities/visibility';
60+
61+
/*------------------------------------*\
62+
#VENDOR
63+
\*------------------------------------*/
64+
@import 'vendor/prism';

‎packages/docs/src/scss/vendor/_prism.scss

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/* PrismJS 1.17.1
2+
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+markup-templating+handlebars+php+json+scss+twig */
3+
/**
4+
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
5+
* Based on https://github.com/chriskempson/tomorrow-theme
6+
* @author Rose Pritchard
7+
*/
8+
9+
code[class*='language-'],
10+
pre[class*='language-'] {
11+
color: #ccc;
12+
background: none;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
font-size: $font-size-med;
15+
text-align: left;
16+
white-space: pre;
17+
word-spacing: normal;
18+
word-break: normal;
19+
word-wrap: normal;
20+
// white-space: pre-wrap;
21+
line-height: 1.5;
22+
23+
-moz-tab-size: 4;
24+
-o-tab-size: 4;
25+
tab-size: 4;
26+
27+
-webkit-hyphens: none;
28+
-moz-hyphens: none;
29+
-ms-hyphens: none;
30+
hyphens: none;
31+
}
32+
33+
/* Code blocks */
34+
pre[class*='language-'] {
35+
padding: 1em;
36+
margin: 0.5em 0;
37+
overflow: auto;
38+
}
39+
40+
:not(pre) > code[class*='language-'],
41+
pre[class*='language-'] {
42+
background: #2d2d2d;
43+
}
44+
45+
/* Inline code */
46+
:not(pre) > code[class*='language-'] {
47+
padding: 0.1em;
48+
border-radius: 0.3em;
49+
white-space: normal;
50+
}
51+
52+
.token.comment,
53+
.token.block-comment,
54+
.token.prolog,
55+
.token.doctype,
56+
.token.cdata {
57+
color: #999;
58+
}
59+
60+
.token.punctuation {
61+
color: #ccc;
62+
}
63+
64+
.token.tag,
65+
.token.attr-name,
66+
.token.namespace,
67+
.token.deleted {
68+
color: #e2777a;
69+
}
70+
71+
.token.function-name {
72+
color: #6196cc;
73+
}
74+
75+
.token.boolean,
76+
.token.number,
77+
.token.function {
78+
color: #f08d49;
79+
}
80+
81+
.token.property,
82+
.token.class-name,
83+
.token.constant,
84+
.token.symbol {
85+
color: #f8c555;
86+
}
87+
88+
.token.selector,
89+
.token.important,
90+
.token.atrule,
91+
.token.keyword,
92+
.token.builtin {
93+
color: #cc99cd;
94+
}
95+
96+
.token.string,
97+
.token.char,
98+
.token.attr-value,
99+
.token.regex,
100+
.token.variable {
101+
color: #7ec699;
102+
}
103+
104+
.token.operator,
105+
.token.entity,
106+
.token.url {
107+
color: #67cdcc;
108+
}
109+
110+
.token.important,
111+
.token.bold {
112+
font-weight: bold;
113+
}
114+
.token.italic {
115+
font-style: italic;
116+
}
117+
118+
.token.entity {
119+
cursor: help;
120+
}
121+
122+
.token.inserted {
123+
color: green;
124+
}

0 commit comments

Comments
 (0)