Created
April 26, 2023 09:30
-
-
Save neisdev/a33a728316384de48a4d065dc4bb7b71 to your computer and use it in GitHub Desktop.
[prismjs] syntax highlighter (advenced)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>[prismjs] syntax highlighter (advenced)</h1> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-highlight/prism-line-highlight.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js'></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/unescaped-markup/prism-unescaped-markup.min.js'></script> | |
| <h2>language-html</h2> | |
| <script type="text/plain" class="language-html line-numbers"><!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <h1>제목</h1> | |
| </body> | |
| </html> | |
| </script> | |
| <h2>language-css</h2> | |
| <script type="text/plain" class="language-css line-numbers">body { | |
| background-color: lightblue; | |
| } | |
| h1 { | |
| color: white; | |
| text-align: center; | |
| } | |
| p { | |
| font-family: verdana; | |
| font-size: 20px; | |
| } | |
| </script> | |
| <h2>language-scss</h2> | |
| <script type="text/plain" class="language-scss line-numbers">$red: #833; | |
| body { | |
| color: $red; | |
| } | |
| .markdown-body { | |
| a { | |
| color: blue; | |
| &:hover { | |
| color: red; | |
| } | |
| } | |
| } | |
| </script> | |
| <h2>language-javascript</h2> | |
| <script type="text/plain" class="language-javascript line-numbers">function myFunction(p1, p2) { | |
| return p1 * p2; | |
| } | |
| document.getElementById("demo").innerHTML = myFunction(4, 3); | |
| </script> | |
| <h2>language-jsx</h2> | |
| <script type="text/plain" class="language-jsx line-numbers">class HelloMessage extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| Hello {this.props.name} | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render( | |
| <HelloMessage name="Taylor" />, | |
| document.getElementById('hello-example') | |
| ); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| pre[class*="language-"], | |
| code[class*="language-"] { | |
| color: #d4d4d4; | |
| font-size: 13px; | |
| text-shadow: none; | |
| font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", | |
| "Courier New", monospace; | |
| direction: ltr; | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: 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-"]::selection, | |
| code[class*="language-"]::selection, | |
| pre[class*="language-"] *::selection, | |
| code[class*="language-"] *::selection { | |
| text-shadow: none; | |
| background: #75a7ca; | |
| } | |
| @media print { | |
| pre[class*="language-"], | |
| code[class*="language-"] { | |
| text-shadow: none; | |
| } | |
| } | |
| pre[class*="language-"] { | |
| padding: 1em; | |
| margin: 0.5em 0; | |
| overflow: auto; | |
| background: #1e1e1e; | |
| } | |
| :not(pre) > code[class*="language-"] { | |
| padding: 0.1em 0.3em; | |
| border-radius: 0.3em; | |
| color: #db4c69; | |
| background: #f9f2f4; | |
| } | |
| /********************************************************* | |
| * Tokens | |
| */ | |
| .namespace { | |
| opacity: 0.7; | |
| } | |
| .token.doctype .token.doctype-tag { | |
| color: #569cd6; | |
| } | |
| .token.doctype .token.name { | |
| color: #9cdcfe; | |
| } | |
| .token.comment, | |
| .token.prolog { | |
| color: #6a9955; | |
| } | |
| .token.punctuation, | |
| .language-html .language-css .token.punctuation, | |
| .language-html .language-javascript .token.punctuation { | |
| color: #d4d4d4; | |
| } | |
| .token.property, | |
| .token.tag, | |
| .token.boolean, | |
| .token.number, | |
| .token.constant, | |
| .token.symbol, | |
| .token.inserted, | |
| .token.unit { | |
| color: #b5cea8; | |
| } | |
| .token.selector, | |
| .token.attr-name, | |
| .token.string, | |
| .token.char, | |
| .token.builtin, | |
| .token.deleted { | |
| color: #ce9178; | |
| } | |
| .language-css .token.string.url { | |
| text-decoration: underline; | |
| } | |
| .token.operator, | |
| .token.entity { | |
| color: #d4d4d4; | |
| } | |
| .token.operator.arrow { | |
| color: #569cd6; | |
| } | |
| .token.atrule { | |
| color: #ce9178; | |
| } | |
| .token.atrule .token.rule { | |
| color: #c586c0; | |
| } | |
| .token.atrule .token.url { | |
| color: #9cdcfe; | |
| } | |
| .token.atrule .token.url .token.function { | |
| color: #dcdcaa; | |
| } | |
| .token.atrule .token.url .token.punctuation { | |
| color: #d4d4d4; | |
| } | |
| .token.keyword { | |
| color: #569cd6; | |
| } | |
| .token.keyword.module, | |
| .token.keyword.control-flow { | |
| color: #c586c0; | |
| } | |
| .token.function, | |
| .token.function .token.maybe-class-name { | |
| color: #dcdcaa; | |
| } | |
| .token.regex { | |
| color: #d16969; | |
| } | |
| .token.important { | |
| color: #569cd6; | |
| } | |
| .token.italic { | |
| font-style: italic; | |
| } | |
| .token.constant { | |
| color: #9cdcfe; | |
| } | |
| .token.class-name, | |
| .token.maybe-class-name { | |
| color: #4ec9b0; | |
| } | |
| .token.console { | |
| color: #9cdcfe; | |
| } | |
| .token.parameter { | |
| color: #9cdcfe; | |
| } | |
| .token.interpolation { | |
| color: #9cdcfe; | |
| } | |
| .token.punctuation.interpolation-punctuation { | |
| color: #569cd6; | |
| } | |
| .token.boolean { | |
| color: #569cd6; | |
| } | |
| .token.property, | |
| .token.variable, | |
| .token.imports .token.maybe-class-name, | |
| .token.exports .token.maybe-class-name { | |
| color: #9cdcfe; | |
| } | |
| .token.selector { | |
| color: #d7ba7d; | |
| } | |
| .token.escape { | |
| color: #d7ba7d; | |
| } | |
| .token.tag { | |
| color: #569cd6; | |
| } | |
| .token.tag .token.punctuation { | |
| color: #808080; | |
| } | |
| .token.cdata { | |
| color: #808080; | |
| } | |
| .token.attr-name { | |
| color: #9cdcfe; | |
| } | |
| .token.attr-value, | |
| .token.attr-value .token.punctuation { | |
| color: #ce9178; | |
| } | |
| .token.attr-value .token.punctuation.attr-equals { | |
| color: #d4d4d4; | |
| } | |
| .token.entity { | |
| color: #569cd6; | |
| } | |
| .token.namespace { | |
| color: #4ec9b0; | |
| } | |
| /********************************************************* | |
| * Language Specific | |
| */ | |
| pre[class*="language-javascript"], | |
| code[class*="language-javascript"], | |
| pre[class*="language-jsx"], | |
| code[class*="language-jsx"], | |
| pre[class*="language-typescript"], | |
| code[class*="language-typescript"], | |
| pre[class*="language-tsx"], | |
| code[class*="language-tsx"] { | |
| color: #9cdcfe; | |
| } | |
| pre[class*="language-css"], | |
| code[class*="language-css"] { | |
| color: #ce9178; | |
| } | |
| pre[class*="language-html"], | |
| code[class*="language-html"] { | |
| color: #d4d4d4; | |
| } | |
| .language-regex .token.anchor { | |
| color: #dcdcaa; | |
| } | |
| .language-html .token.punctuation { | |
| color: #808080; | |
| } | |
| /********************************************************* | |
| * Line highlighting | |
| */ | |
| pre[data-line] { | |
| position: relative; | |
| } | |
| pre[class*="language-"] > code[class*="language-"] { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .line-highlight { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| padding: inherit 0; | |
| margin-top: 1em; | |
| background: #f7ebc6; | |
| box-shadow: inset 5px 0 0 #f7d87c; | |
| z-index: 0; | |
| pointer-events: none; | |
| line-height: inherit; | |
| white-space: pre; | |
| } | |
| /* line-numbers */ | |
| pre[class*="language-"].line-numbers { | |
| position: relative; | |
| padding-left: 3.8em; | |
| counter-reset: linenumber; | |
| } | |
| pre[class*="language-"].line-numbers > code { | |
| position: relative; | |
| white-space: inherit; | |
| } | |
| .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 { | |
| display: block; | |
| counter-increment: linenumber; | |
| } | |
| .line-numbers-rows > span:before { | |
| content: counter(linenumber); | |
| color: #999; | |
| display: block; | |
| padding-right: 0.8em; | |
| text-align: right; | |
| } | |
| /* toolbar */ | |
| div.code-toolbar { | |
| position: relative; | |
| } | |
| div.code-toolbar > .toolbar { | |
| position: absolute; | |
| top: 0.3em; | |
| right: 0.2em; | |
| transition: opacity 0.3s ease-in-out; | |
| opacity: 0.5; | |
| } | |
| div.code-toolbar:hover > .toolbar { | |
| opacity: 1; | |
| } | |
| /* Separate line b/c rules are thrown out if selector is invalid. | |
| IE11 and old Edge versions don't support :focus-within. */ | |
| div.code-toolbar:focus-within > .toolbar { | |
| opacity: 1; | |
| } | |
| div.code-toolbar > .toolbar .toolbar-item { | |
| display: inline-block; | |
| } | |
| div.code-toolbar > .toolbar a { | |
| cursor: pointer; | |
| } | |
| div.code-toolbar > .toolbar button { | |
| background: none; | |
| border: 0; | |
| color: inherit; | |
| font: inherit; | |
| line-height: normal; | |
| overflow: visible; | |
| padding: 0; | |
| -webkit-user-select: none; /* for button */ | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| div.code-toolbar > .toolbar a, | |
| div.code-toolbar > .toolbar button, | |
| div.code-toolbar > .toolbar span { | |
| color: #bbb; | |
| font-size: 0.8em; | |
| padding: 0 0.5em; | |
| background: #f5f2f0; | |
| background: rgba(224, 224, 224, 0.2); | |
| box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); | |
| border-radius: 0.5em; | |
| } | |
| div.code-toolbar > .toolbar a:hover, | |
| div.code-toolbar > .toolbar a:focus, | |
| div.code-toolbar > .toolbar button:hover, | |
| div.code-toolbar > .toolbar button:focus, | |
| div.code-toolbar > .toolbar span:hover, | |
| div.code-toolbar > .toolbar span:focus { | |
| color: inherit; | |
| text-decoration: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment