fix: update highlight code style

Woosmap · Dec 15, 2023 · 7bd6cb0 · 7bd6cb0
1 parent d31ff0a
commit 7bd6cb0
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/samples/highlight.html.njk b/samples/highlight.html.njk
@@ -20,7 +20,7 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
     </script>
     <style>
         pre[class*="language-"], code[class*="language-"] {color: #24292f;font-size: 13px;text-shadow: none;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 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-"]::mozselection, code[class*="language-"]::mozselection {text-shadow: none;background: #9fc6e9;}@media print {pre[class*="language-"], code[class*="language-"] {text-shadow: none;}}pre[class*="language-"] {padding: 1.5em;margin: 0;overflow: auto; width: 100%;}:not(pre) > code[class*="language-"] {padding: .1em .3em;border-radius: .3em;color: #24292f;background: #eff1f3;}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: #fff8c5;box-shadow: inset 5px 0 0 #eed888;z-index: 0;pointer-events: none;line-height: inherit;white-space: pre;}.namespace {opacity: .7;}.token.comment, .token.prolog, .token.doctype, .token.cdata {color: #6e7781;}.token.punctuation {color: #24292f;}.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {color: #0550ae;}.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {color: #0a3069;}.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {color: #0550ae;}.token.atrule, .token.attr-value, .token.keyword {color: #cf222e;}.token.function {color: #8250df;}.token.regex, .token.important, .token.variable {color: #0a3069;}.token.important, .token.bold {font-weight: bold;}.token.italic {font-style: italic;}.token.entity {cursor: help;}
-        .ContentSnippet-module--content-snippet{height:100%}.CodeSnippet-module--snippets-wrap{border-radius:4px;display:flex;max-height:60rem}.CodeSnippet-module--snippets-multilang .CodeSnippet-module--snippets-wrap{display:none;width:100%;outline:0}.CodeSnippet-module--snippets-multilang .CodeSnippet-module--snippets-wrap[active]{display:flex}.ContentSnippet-module--code-snippet{background-color:#F6F8FA;border:1px solid rgba(29,28,29,0.13);overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%}.CodeSnippet-module--snippets-multilang{display:flex;height:100%;width:100%;overflow:auto}.CodeSnippet-module--header{align-items:center;border-bottom:1px solid rgba(,29,28,29,0.13);box-sizing:border-box;display:flex;height:48px;justify-content:space-between;padding:0 18px;background-color:#fff}.CodeSnippet-module--header-title{color:#778589;flex-grow:0;font-family:Graphik Web,Helvetica Neue,Helvetica,Arial,Verdana,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:15px;margin-right:8px;margin-top:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.CodeSnippet-module--header-buttons{display:inline-flex;flex-grow:1;justify-content:flex-end}.CodeSnippet-module--header--single{position:absolute;right:0;background:transparent;border:none;height:26px;padding:4px 4px 0}.CodeSnippet-module--header--single .CodeSnippet-module--copy-wrap{margin-left:6px}.CodeSnippet-module--header--multilang .CodeSnippet-module--language{cursor:pointer}.CodeSnippet-module--copy-wrap{display:flex;margin-left:15px}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet{background:transparent;border:0;color:#778589;cursor:pointer;outline:none;padding:0;transition:all .2s ease-in-out}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet-icon-wrap{display:inline-block;width:24px;height:24px}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet:hover,.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet:focus{color:#F50157}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet .CodeSnippet-module--icon-check{display:none;padding:6px 3px!important}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet .CodeSnippet-module--icon-check path{fill:#F50157}.CodeSnippet-module--copy-wrap svg{padding-top:0!important}.CodeSnippet-module--language{color:#778589;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;margin-left:15px;line-height:48px;max-width:200px;text-align:center;transition:color .2s;position:relative}.CodeSnippet-module--language:after{border-radius:0;border-top:2px solid transparent;bottom:0;content:"";display:block;position:absolute;left:0;right:0}.CodeSnippet-module--language:focus,.CodeSnippet-module--language:hover{border-color:#778589}.CodeSnippet-module--language[active]{color:inherit}.CodeSnippet-module--language[active]:after{border-color:#F50157}
+        .ContentSnippet-module--content-snippet{height:100%}.CodeSnippet-module--snippets-wrap{border-radius:4px;display:flex;max-height:60rem}.CodeSnippet-module--snippets-multilang .CodeSnippet-module--snippets-wrap{display:none;width:100%;outline:0}.CodeSnippet-module--snippets-multilang .CodeSnippet-module--snippets-wrap[active]{display:flex}.ContentSnippet-module--code-snippet{background-color:#F6F8FA;overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%}.CodeSnippet-module--snippets-multilang{display:flex;height:100%;width:100%;overflow:auto}.CodeSnippet-module--header{align-items:center;border-bottom:1px solid rgba(,29,28,29,0.13);box-sizing:border-box;display:flex;height:48px;justify-content:space-between;padding:0 18px;background-color:#fff}.CodeSnippet-module--header-title{color:#778589;flex-grow:0;font-family:Graphik Web,Helvetica Neue,Helvetica,Arial,Verdana,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:15px;margin-right:8px;margin-top:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.CodeSnippet-module--header-buttons{display:inline-flex;flex-grow:1;justify-content:flex-end}.CodeSnippet-module--header--single{position:absolute;right:0;background:transparent;border:none;height:26px;padding:4px 4px 0}.CodeSnippet-module--header--single .CodeSnippet-module--copy-wrap{margin-left:6px}.CodeSnippet-module--header--multilang .CodeSnippet-module--language{cursor:pointer}.CodeSnippet-module--copy-wrap{display:flex;margin-left:15px}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet{background:transparent;border:0;color:#778589;cursor:pointer;outline:none;padding:0;transition:all .2s ease-in-out}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet-icon-wrap{display:inline-block;width:24px;height:24px}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet:hover,.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet:focus{color:#F50157}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet .CodeSnippet-module--icon-check{display:none;padding:6px 3px!important}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet .CodeSnippet-module--icon-check path{fill:#F50157}.CodeSnippet-module--copy-wrap svg{padding-top:0!important}.CodeSnippet-module--language{color:#778589;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;margin-left:15px;line-height:48px;max-width:200px;text-align:center;transition:color .2s;position:relative}.CodeSnippet-module--language:after{border-radius:0;border-top:2px solid transparent;bottom:0;content:"";display:block;position:absolute;left:0;right:0}.CodeSnippet-module--language:focus,.CodeSnippet-module--language:hover{border-color:#778589}.CodeSnippet-module--language[active]{color:inherit}.CodeSnippet-module--language[active]:after{border-color:#F50157}
     </style>
     <style>
         html, body {
@@ -56,6 +56,10 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
             z-index: 1;
             overflow: hidden;
             height: 50vh;
+            box-sizing: border-box;
+            border: 1px solid rgba(29,28,29,0.13);
+            border-left: none;
+            border-bottom: none;
         }
 
         #main {