├── .editorconfig
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── gulpfile.js
├── media
└── logo.png
├── package.json
├── src
├── css
│ ├── components.css
│ ├── grid.css
│ ├── hack.css
│ ├── layout.css
│ ├── markdown.css
│ ├── mixins.css
│ ├── reset.css
│ ├── responsive.css
│ ├── themes
│ │ ├── dark-grey.css
│ │ ├── dark.css
│ │ ├── solarized-dark.css
│ │ └── standard.css
│ └── vars.css
├── html
│ ├── carbon.jade
│ ├── components.jade
│ ├── dark-grey.jade
│ ├── dark.jade
│ ├── github.jade
│ ├── index.jade
│ ├── solarized-dark.jade
│ └── standard.jade
└── static
│ ├── CNAME
│ ├── app.js
│ ├── prism.css
│ ├── prism.js
│ ├── site-dark.css
│ └── site.css
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | /dist
5 | /demo
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /demo
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 EGOIST 0x142857@gmail.com
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
194 | ```
195 |
196 | h4 Card
197 |
198 | .grid
199 | .cell.-4of12
200 | .card
201 | header.card-header title
202 | .card-body
203 | .inner Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
204 |
205 | :marked
206 | ```html
207 |
208 | title
209 |
210 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
260 | ```
261 |
262 | h4 Media
263 |
264 | p This is useful if you intend to display a list of items, like the Twitter timeline.
265 |
266 | .example
267 | .media
268 | .media-left
269 | .avatarholder e
270 | .media-body
271 | .media-heading EGOIST @egoist
272 | .media-content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
273 | .media
274 | .media-body
275 | .media-heading EGOIST @egoist
276 | .media-content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
277 | .media-right
278 | .avatarholder e
279 |
280 | :marked
281 | ```html
282 |
283 |
284 |
285 |
e
286 |
287 |
288 |
EGOIST @egoist
289 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
290 |
291 |
292 |
293 |
294 |
295 |
296 |
EGOIST @egoist
297 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
298 |
299 |
300 |
e
301 |
302 |
303 | ```
304 |
305 | h4 Loading
306 |
307 | p hack.css gives you a default loading element, but you can find more at CSS-only loaders.
308 |
309 | .example
310 | .loading
311 |
312 | .example
313 | button.btn.btn-info.btn-ghost
314 | | Loading…
315 | span.loading
316 |
317 | .example
318 | .alert.alert-info
319 | span.loading
320 | | Loading in an alert box…
321 |
322 | :marked
323 | ```html
324 |
325 |
326 |
330 |
331 |
332 |
333 | Loading in an alert box…
334 |
335 | ```
336 |
337 |
--------------------------------------------------------------------------------
/src/html/dark-grey.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | meta(charset="utf-8")
5 | meta(http-equiv="X-UA-Compatible" content="IE=edge")
6 | meta(name="viewport" content="width=device-width, initial-scale=1")
7 | title dark-grey mode of hack.css
8 | link(rel="stylesheet" href="./prism.css")
9 | link(rel="stylesheet" href="./hack.css?t=#{time}")
10 | link(rel="stylesheet" href="./dark-grey.css?t=#{time}")
11 | link(rel="stylesheet" href="./site.css?t=#{time}")
12 | link(rel="stylesheet" href="./site-dark.css?t=#{time}")
13 | body.hack.dark-grey
14 | .main.container
15 | p
16 | a(href="/") « Back to home
17 | h2 Dark-grey mode
18 | p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.
19 |
20 | include carbon
21 |
22 | h2 Usage
23 | :marked
24 | ```html
25 |
26 |
27 |
28 | ...
29 |
30 | ```
31 |
32 | h2 Components
33 |
34 | include components
35 |
36 | script(src="./prism.js" async)
37 | script(src="./app.js" async)
38 |
--------------------------------------------------------------------------------
/src/html/dark.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | meta(charset="utf-8")
5 | meta(http-equiv="X-UA-Compatible" content="IE=edge")
6 | meta(name="viewport" content="width=device-width, initial-scale=1")
7 | title dark mode of hack.css
8 | link(rel="stylesheet" href="./prism.css")
9 | link(rel="stylesheet" href="./hack.css?t=#{time}")
10 | link(rel="stylesheet" href="./dark.css?t=#{time}")
11 | link(rel="stylesheet" href="./site.css?t=#{time}")
12 | link(rel="stylesheet" href="./site-dark.css?t=#{time}")
13 | body.hack.dark
14 | .main.container
15 | p
16 | a(href="/") « Back to home
17 | h2 Dark mode
18 | p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.
19 |
20 | include carbon
21 |
22 | h2 Usage
23 | :marked
24 | ```html
25 |
26 |
27 |
28 | ...
29 |
30 | ```
31 |
32 | h2 Components
33 |
34 | include components
35 |
36 | script(src="./prism.js" async)
37 | script(src="./app.js" async)
38 |
--------------------------------------------------------------------------------
/src/html/github.jade:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/html/index.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | meta(charset="utf-8")
5 | meta(http-equiv="X-UA-Compatible" content="IE=edge")
6 | meta(name="viewport" content="width=device-width, initial-scale=1")
7 | title hack.css
8 | link(rel="stylesheet" href="./prism.css")
9 | link(rel="stylesheet" href="./hack.css?t=#{time}")
10 | link(rel="stylesheet", href="./site.css?t=#{time}")
11 | body.hack
12 | include github
13 | .main.container
14 | h1 hack.css - dead simple css framework
15 |
16 | p As you can see, this website is proudly built using hack.css.
17 |
18 | .alert.alert-info New! dark, dark-grey, solarized-dark and standard modes are now available!
19 |
20 | include carbon
21 |
22 | h2 About
23 |
24 | p Many hackers enjoy the readability of markdown code, some stylings in hack.css are exactly the way markdown is.
25 |
26 | ul
27 | li conquer the world
28 | li rule the web
29 | li copy the code
30 |
31 | p
32 | a(target="_blank" href="https://daringfireball.net/projects/markdown/") kinda cool, huh?
33 |
34 | p hack.css is inspired by markdown.css and zeit.co
35 |
36 | h2 Use cases
37 |
38 | p hack.css is perfect for the homepage of your open-source projects! happy <coding> !
39 |
40 | h2 How to use?
41 |
42 | p Install via npm by running npm install -S hack and load it with your preferred pre-processor.
43 |
44 | p You can also simply hot-link the url of the css file.
45 |
46 | p The last step is to add the .hack class to your body element.
47 |
48 | :marked
49 | ```html
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | ```
64 |
65 | h2 User guide
66 |
67 | h3 Basic
68 |
69 | p Use .container to centralize the main content.
70 |
71 | p Use flexbox to make layouts.
72 |
73 | .example
74 | .grid.grid-example
75 | .cell.-4of12
76 | .content 4
77 | .cell.-4of12
78 | .content 4
79 | .cell.-4of12
80 | .content 4
81 | .grid.grid-example
82 | .cell.-4of12
83 | .content 4
84 | .cell.-8of12
85 | .content 8
86 | .grid.grid-example
87 | each i in new Array(12)
88 | .cell
89 | .content 1
90 |
91 | h4 .grid modifiers
92 | ul
93 | li
94 | | To align items with align-items
95 | ul
96 | li
97 | strong -top
98 | | : To top
99 | li
100 | strong -middle
101 | | : To middle
102 | li
103 | strong -bottom
104 | | : To bottom
105 | li
106 | strong -stretch
107 | | : Stretch items
108 | li
109 | strong -baseline
110 | | : To baseline
111 | li
112 | | To layout contents with justify-content
113 | ul
114 | li
115 | strong -left
116 | | : To left
117 | li
118 | strong -center
119 | | : To center
120 | li
121 | strong -right
122 | | : To right
123 | li
124 | strong -between
125 | | : Add spaces between items
126 | li
127 | strong -around
128 | | : Add spaces around items
129 |
130 | h4 .cell modifiers
131 | ul
132 | li
133 | strong -1of12
134 | | : Set item width to 8.3% of parent
135 | li
136 | strong -2of12
137 | | : Set item width to 16.7% of parent
138 | li
139 | strong -3of12
140 | | : Set item width to 25% of parent
141 | li
142 | strong -4of12
143 | | : Set item width to 33% of parent
144 | li
145 | strong -5of12
146 | | : Set item width to 41.7% of parent
147 | li
148 | strong -6of12
149 | | : Set item width to 50% of parent
150 | li
151 | strong -7of12
152 | | : Set item width to 58.3% of parent
153 | li
154 | strong -8of12
155 | | : Set item width to 66.7% of parent
156 | li
157 | strong -9of12
158 | | : Set item width to 75% of parent
159 | li
160 | strong -10of12
161 | | : Set item width to 83.3% of parent
162 | li
163 | strong -11of12
164 | | : Set item width to 91.7% of parent
165 | li
166 | strong -12of12
167 | | : Set item width to 100% of parent
168 |
169 | h3 Components
170 |
171 | include components
172 |
173 | footer.footer
174 | | Version #{version} Build #{build}
175 |
176 | script(src="./prism.js" async)
177 | script(src="./app.js" async)
178 |
179 |
--------------------------------------------------------------------------------
/src/html/solarized-dark.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | meta(charset="utf-8")
5 | meta(http-equiv="X-UA-Compatible" content="IE=edge")
6 | meta(name="viewport" content="width=device-width, initial-scale=1")
7 | title solarized-dark mode of hack.css
8 | link(rel="stylesheet" href="./prism.css")
9 | link(rel="stylesheet" href="./hack.css?t=#{time}")
10 | link(rel="stylesheet" href="./solarized-dark.css?t=#{time}")
11 | link(rel="stylesheet" href="./site.css?t=#{time}")
12 | link(rel="stylesheet" href="./site-dark.css?t=#{time}")
13 | body.hack.solarized-dark
14 | .main.container
15 | p
16 | a(href="/") « Back to home
17 | h2 Solarized Dark mode
18 | p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.
19 |
20 | include carbon
21 |
22 | h2 Usage
23 | :marked
24 | ```html
25 |
26 |
27 |
28 | ...
29 |
30 | ```
31 |
32 | h2 Components
33 |
34 | include components
35 |
36 | script(src="./prism.js" async)
37 | script(src="./app.js" async)
38 |
--------------------------------------------------------------------------------
/src/html/standard.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | meta(charset="utf-8")
5 | meta(http-equiv="X-UA-Compatible" content="IE=edge")
6 | meta(name="viewport" content="width=device-width, initial-scale=1")
7 | title standard mode of hack.css
8 | link(rel="stylesheet" href="./prism.css")
9 | link(rel="stylesheet" href="./hack.css?t=#{time}")
10 | link(rel="stylesheet" href="./standard.css?t=#{time}")
11 | link(rel="stylesheet" href="./site.css?t=#{time}")
12 |
13 | body.standard
14 | .main.container
15 | p
16 | a(href="/") « Back to home
17 | h2 Standard mode
18 | p Note: standard mode uses a different font and font-size to make it more readable.
19 |
20 | include carbon
21 |
22 | h2 Usage
23 | :marked
24 | ```html
25 |
26 |
27 |
28 | ...
29 |
30 | ```
31 |
32 | h2 Components
33 |
34 | include components
35 |
36 | script(src="./prism.js" async)
37 | script(src="./app.js" async)
38 |
--------------------------------------------------------------------------------
/src/static/CNAME:
--------------------------------------------------------------------------------
1 | hackcss.com
--------------------------------------------------------------------------------
/src/static/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egoist/hack/b2b7c5f0f411520651ae3995e66d574bf28ff98f/src/static/app.js
--------------------------------------------------------------------------------
/src/static/prism.css:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=show-language */
2 | /**
3 | * prism.js default theme for JavaScript, CSS and HTML
4 | * Based on dabblet (http://dabblet.com)
5 | * @author Lea Verou
6 | */
7 |
8 | code[class*="language-"],
9 | pre[class*="language-"] {
10 | color: black;
11 | background: none;
12 | text-shadow: 0 1px white;
13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14 | text-align: left;
15 | white-space: pre;
16 | word-spacing: normal;
17 | word-break: normal;
18 | word-wrap: normal;
19 | line-height: 1.5;
20 |
21 | -moz-tab-size: 4;
22 | -o-tab-size: 4;
23 | tab-size: 4;
24 |
25 | -webkit-hyphens: none;
26 | -moz-hyphens: none;
27 | -ms-hyphens: none;
28 | hyphens: none;
29 | }
30 |
31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
33 | text-shadow: none;
34 | background: #b3d4fc;
35 | }
36 |
37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
39 | text-shadow: none;
40 | background: #b3d4fc;
41 | }
42 |
43 | @media print {
44 | code[class*="language-"],
45 | pre[class*="language-"] {
46 | text-shadow: none;
47 | }
48 | }
49 |
50 | /* Code blocks */
51 | pre[class*="language-"] {
52 | padding: 1em;
53 | margin: .5em 0;
54 | overflow: auto;
55 | }
56 |
57 | :not(pre) > code[class*="language-"],
58 | pre[class*="language-"] {
59 | background: #f5f2f0;
60 | }
61 |
62 | /* Inline code */
63 | :not(pre) > code[class*="language-"] {
64 | padding: .1em;
65 | border-radius: .3em;
66 | white-space: normal;
67 | }
68 |
69 | .token.comment,
70 | .token.prolog,
71 | .token.doctype,
72 | .token.cdata {
73 | color: slategray;
74 | }
75 |
76 | .token.punctuation {
77 | color: #999;
78 | }
79 |
80 | .namespace {
81 | opacity: .7;
82 | }
83 |
84 | .token.property,
85 | .token.tag,
86 | .token.boolean,
87 | .token.number,
88 | .token.constant,
89 | .token.symbol,
90 | .token.deleted {
91 | color: #905;
92 | }
93 |
94 | .token.selector,
95 | .token.attr-name,
96 | .token.string,
97 | .token.char,
98 | .token.builtin,
99 | .token.inserted {
100 | color: #690;
101 | }
102 |
103 | .token.operator,
104 | .token.entity,
105 | .token.url,
106 | .language-css .token.string,
107 | .style .token.string {
108 | color: #a67f59;
109 | background: hsla(0, 0%, 100%, .5);
110 | }
111 |
112 | .token.atrule,
113 | .token.attr-value,
114 | .token.keyword {
115 | color: #07a;
116 | }
117 |
118 | .token.function {
119 | color: #DD4A68;
120 | }
121 |
122 | .token.regex,
123 | .token.important,
124 | .token.variable {
125 | color: #e90;
126 | }
127 |
128 | .token.important,
129 | .token.bold {
130 | font-weight: bold;
131 | }
132 | .token.italic {
133 | font-style: italic;
134 | }
135 |
136 | .token.entity {
137 | cursor: help;
138 | }
139 |
140 | div.prism-show-language {
141 | position: relative;
142 | }
143 |
144 | div.prism-show-language > div.prism-show-language-label {
145 | color: black;
146 | background-color: #CFCFCF;
147 | display: inline-block;
148 | position: absolute;
149 | bottom: auto;
150 | left: auto;
151 | top: 0;
152 | right: 0;
153 | width: auto;
154 | height: auto;
155 | font-size: 0.9em;
156 | border-radius: 0 0 0 5px;
157 | padding: 0 0.5em;
158 | text-shadow: none;
159 | z-index: 1;
160 | -webkit-box-shadow: none;
161 | -moz-box-shadow: none;
162 | box-shadow: none;
163 | -webkit-transform: none;
164 | -moz-transform: none;
165 | -ms-transform: none;
166 | -o-transform: none;
167 | transform: none;
168 | }
169 |
--------------------------------------------------------------------------------
/src/static/prism.js:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
2 | 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+(g?b[1].length:0),_=b.index+b[0].length,A=m,S=y,P=r.length;P>A&&_>S;++A)S+=(r[A].matchedStr||r[A]).length,w>=S&&(++m,y=S);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,S),b.index-=y}if(b){g&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),j=[m,k];x&&j.push(x);var N=new a(l,c?n.tokenize(b,c):b,d,b,h);j.push(N),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}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.matchedStr=a||null,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="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""+i.tag+">"},!_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);
3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(