add prism via npm
This commit is contained in:
parent
79923aa393
commit
a07cc445d1
|
@ -103,8 +103,6 @@ if(!empty($platforms)) {
|
|||
});
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js" integrity="sha512-TbHaMJHEmRBDf9W3P7VcRGwEmVEJu7MO6roAE0C4yqoNHeIVo3otIX3zj1DOLtn7YCD+U8Oy1T9eMtG/M9lxRw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<?php echo $this->exec($this->getParam('head', [])); ?>
|
||||
</head>
|
||||
|
||||
|
|
|
@ -73,7 +73,6 @@ services:
|
|||
- ./app:/usr/src/code/app
|
||||
# - ./vendor:/usr/src/code/vendor
|
||||
- ./docs:/usr/src/code/docs
|
||||
- ./public:/usr/src/code/public
|
||||
- ./src:/usr/src/code/src
|
||||
- ./debug:/tmp
|
||||
- ./dev:/usr/local/dev
|
||||
|
|
26
gulpfile.js
26
gulpfile.js
|
@ -99,6 +99,32 @@ const configDep = {
|
|||
'node_modules/markdown-it/dist/markdown-it.js',
|
||||
'node_modules/pell/dist/pell.js',
|
||||
'node_modules/turndown/dist/turndown.js',
|
||||
// PrismJS Core
|
||||
'node_modules/prismjs/components/prism-core.min.js',
|
||||
// PrismJS Languages
|
||||
'node_modules/prismjs/components/prism-markup.min.js',
|
||||
'node_modules/prismjs/components/prism-css.min.js',
|
||||
'node_modules/prismjs/components/prism-clike.min.js',
|
||||
'node_modules/prismjs/components/prism-javascript.min.js',
|
||||
'node_modules/prismjs/components/prism-bash.min.js',
|
||||
'node_modules/prismjs/components/prism-csharp.min.js',
|
||||
'node_modules/prismjs/components/prism-dart.min.js',
|
||||
'node_modules/prismjs/components/prism-go.min.js',
|
||||
'node_modules/prismjs/components/prism-graphql.min.js',
|
||||
'node_modules/prismjs/components/prism-http.min.js',
|
||||
'node_modules/prismjs/components/prism-java.min.js',
|
||||
'node_modules/prismjs/components/prism-json.min.js',
|
||||
'node_modules/prismjs/components/prism-kotlin.min.js',
|
||||
'node_modules/prismjs/components/prism-markup-templating.min.js',
|
||||
'node_modules/prismjs/components/prism-php.min.js',
|
||||
'node_modules/prismjs/components/prism-powershell.min.js',
|
||||
'node_modules/prismjs/components/prism-python.min.js',
|
||||
'node_modules/prismjs/components/prism-ruby.min.js',
|
||||
'node_modules/prismjs/components/prism-swift.min.js',
|
||||
'node_modules/prismjs/components/prism-typescript.min.js',
|
||||
'node_modules/prismjs/components/prism-yaml.min.js',
|
||||
// PrismJS Plugins
|
||||
'node_modules/prismjs/plugins/line-numbers/prism-line-numbers.min.js',
|
||||
],
|
||||
dest: './public/dist/scripts'
|
||||
};
|
||||
|
|
11
package-lock.json
generated
11
package-lock.json
generated
|
@ -12,6 +12,7 @@
|
|||
"chart.js": "^3.5.1",
|
||||
"markdown-it": "^12.2.0",
|
||||
"pell": "^1.0.6",
|
||||
"prismjs": "^1.25.0",
|
||||
"turndown": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -3564,6 +3565,11 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/prismjs": {
|
||||
"version": "1.25.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
|
||||
"integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
|
@ -7971,6 +7977,11 @@
|
|||
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
|
||||
"dev": true
|
||||
},
|
||||
"prismjs": {
|
||||
"version": "1.25.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
|
||||
"integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
|
||||
},
|
||||
"process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
"chart.js": "^3.5.1",
|
||||
"markdown-it": "^12.2.0",
|
||||
"pell": "^1.0.6",
|
||||
"prismjs": "^1.25.0",
|
||||
"turndown": "^7.1.1"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,6 +19,7 @@ img[src=""] {
|
|||
@import "icons";
|
||||
@import "polyfills";
|
||||
@import "forms";
|
||||
@import "ide";
|
||||
@import "scopes/console";
|
||||
@import "scopes/home";
|
||||
@import "comps/alerts";
|
||||
|
@ -32,7 +33,6 @@ img[src=""] {
|
|||
@import "comps/modal";
|
||||
@import "comps/scroll";
|
||||
@import "comps/tabs";
|
||||
@import "dependencies/prism";
|
||||
|
||||
html {
|
||||
padding: 0;
|
||||
|
|
|
@ -1,358 +0,0 @@
|
|||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+ruby+markup-templating+php&plugins=line-numbers */
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
|
||||
.ide {
|
||||
background-color: var(--config-prism-background);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2px 4px 0 rgba(50,50,93,.3);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
&:extend(.force-left);
|
||||
&:extend(.force-ltr);
|
||||
|
||||
* {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
&[data-lang]::after {
|
||||
content: attr(data-lang-label);
|
||||
display: inline-block;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 10px;
|
||||
right: 10px; // should be right for both ltr and rtl
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
&[data-lang="bash"]::after {
|
||||
background: var(--config-language-bash);
|
||||
color: var(--config-language-bash-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="javascript"]::after {
|
||||
background: var(--config-language-javascript);
|
||||
color: var(--config-language-javascript-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="web"]::after {
|
||||
background: var(--config-language-web);
|
||||
color: var(--config-language-web-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="html"]::after {
|
||||
background: var(--config-language-html);
|
||||
color: var(--config-language-html-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="php"]::after {
|
||||
background: var(--config-language-php);
|
||||
color: var(--config-language-php-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="nodejs"]::after {
|
||||
background: var(--config-language-nodejs);
|
||||
color: var(--config-language-nodejs-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="ruby"]::after {
|
||||
background: var(--config-language-ruby);
|
||||
color: var(--config-language-ruby-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="python"]::after {
|
||||
background: var(--config-language-python);
|
||||
color: var(--config-language-python-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="go"]::after {
|
||||
background: var(--config-language-go);
|
||||
color: var(--config-language-go-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="dart"]::after {
|
||||
background: var(--config-language-dart);
|
||||
color: var(--config-language-dart-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="flutter"]::after {
|
||||
background: var(--config-language-flutter);
|
||||
color: var(--config-language-flutter-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="android"]::after {
|
||||
background: var(--config-language-android);
|
||||
color: var(--config-language-android-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="kotlin"]::after {
|
||||
background: var(--config-language-kotlin);
|
||||
color: var(--config-language-kotlin-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="java"]::after {
|
||||
background: var(--config-language-java);
|
||||
color: var(--config-language-java-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="yaml"]::after {
|
||||
background: var(--config-language-yaml);
|
||||
color: var(--config-language-yaml-contrast);
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: inherit!important;
|
||||
background: transparent!important;
|
||||
padding: inherit!important;
|
||||
font-size: inherit!important;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
cursor: pointer;
|
||||
content: attr(data-lang);
|
||||
display: inline-block;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
bottom: -20px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
.func-start(50%);
|
||||
opacity: 0;
|
||||
transition: bottom .3s, opacity .3s;
|
||||
line-height: normal;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
|
||||
&::before {
|
||||
.func-padding-end(5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.copy {
|
||||
transition: bottom .3s, opacity .3s;
|
||||
opacity: 0.90;
|
||||
bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
color: #e6ebf1;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
&.light {
|
||||
box-shadow: 0 2px 4px 0 rgba(50,50,93,.1);
|
||||
background-color: #ffffff;
|
||||
|
||||
pre {
|
||||
color: #414770;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #91a2b0;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #149570;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #414770;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #414770;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
background: #f2feef;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #5dc79e;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #6772e4;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6b7c93;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #f79a59;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #3ecf8e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #45b2e8;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #7795f8;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
//font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
background: var(--config-prism-numbers);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: -20px;
|
||||
bottom: -21px;
|
||||
padding: 20px 0;
|
||||
font-size: 100%;
|
||||
left: -60px;
|
||||
width: 40px; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
.func-padding-end(5px);
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #636365;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
349
public/styles/ide.less
Normal file
349
public/styles/ide.less
Normal file
|
@ -0,0 +1,349 @@
|
|||
.ide {
|
||||
background-color: var(--config-prism-background);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.3);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
&:extend(.force-left);
|
||||
&:extend(.force-ltr);
|
||||
|
||||
* {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
&[data-lang]::after {
|
||||
content: attr(data-lang-label);
|
||||
display: inline-block;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 10px;
|
||||
right: 10px; // should be right for both ltr and rtl
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
&[data-lang="bash"]::after {
|
||||
background: var(--config-language-bash);
|
||||
color: var(--config-language-bash-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="javascript"]::after {
|
||||
background: var(--config-language-javascript);
|
||||
color: var(--config-language-javascript-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="web"]::after {
|
||||
background: var(--config-language-web);
|
||||
color: var(--config-language-web-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="html"]::after {
|
||||
background: var(--config-language-html);
|
||||
color: var(--config-language-html-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="php"]::after {
|
||||
background: var(--config-language-php);
|
||||
color: var(--config-language-php-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="nodejs"]::after {
|
||||
background: var(--config-language-nodejs);
|
||||
color: var(--config-language-nodejs-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="ruby"]::after {
|
||||
background: var(--config-language-ruby);
|
||||
color: var(--config-language-ruby-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="python"]::after {
|
||||
background: var(--config-language-python);
|
||||
color: var(--config-language-python-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="go"]::after {
|
||||
background: var(--config-language-go);
|
||||
color: var(--config-language-go-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="dart"]::after {
|
||||
background: var(--config-language-dart);
|
||||
color: var(--config-language-dart-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="flutter"]::after {
|
||||
background: var(--config-language-flutter);
|
||||
color: var(--config-language-flutter-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="android"]::after {
|
||||
background: var(--config-language-android);
|
||||
color: var(--config-language-android-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="kotlin"]::after {
|
||||
background: var(--config-language-kotlin);
|
||||
color: var(--config-language-kotlin-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="java"]::after {
|
||||
background: var(--config-language-java);
|
||||
color: var(--config-language-java-contrast);
|
||||
}
|
||||
|
||||
&[data-lang="yaml"]::after {
|
||||
background: var(--config-language-yaml);
|
||||
color: var(--config-language-yaml-contrast);
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
padding: inherit !important;
|
||||
font-size: inherit !important;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
cursor: pointer;
|
||||
content: attr(data-lang);
|
||||
display: inline-block;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
bottom: -20px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
.func-start(50%);
|
||||
opacity: 0;
|
||||
transition: bottom 0.3s, opacity 0.3s;
|
||||
line-height: normal;
|
||||
font-family: "Poppins", sans-serif;
|
||||
|
||||
&::before {
|
||||
.func-padding-end(5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.copy {
|
||||
transition: bottom 0.3s, opacity 0.3s;
|
||||
opacity: 0.9;
|
||||
bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
color: #e6ebf1;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
&.light {
|
||||
box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.1);
|
||||
background-color: #ffffff;
|
||||
|
||||
pre {
|
||||
color: #414770;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #91a2b0;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #149570;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #414770;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #414770;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
background: #f2feef;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #5dc79e;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #6772e4;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6b7c93;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #f79a59;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #3ecf8e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #45b2e8;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #7795f8;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
//font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
background: var(--config-prism-numbers);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: -20px;
|
||||
bottom: -21px;
|
||||
padding: 20px 0;
|
||||
font-size: 100%;
|
||||
left: -60px;
|
||||
width: 40px; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
.func-padding-end(5px);
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #636365;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
Loading…
Reference in a new issue