Skip to content

Commit

Permalink
fix: updated highlight style
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaelsimon
gaelsimon committed Dec 15, 2023
1 parent ec31211 commit f0640c2
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions samples/highlight.html.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var t={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},e="data-src-status",i='pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])';Prism.hooks.add("before-highlightall",(function(t){t.selector+=", "+i})),Prism.hooks.add("before-sanity-check",(function(a){var n=a.element;if(n.matches(i)){a.code="",n.setAttribute(e,"loading");var s=n.appendChild(document.createElement("CODE"));s.textContent="Loading…";var r=n.getAttribute("data-src"),l=a.language;if("none"===l){var o=(/\.(\w+)$/.exec(r)||[,"none"])[1];l=t[o]||o}Prism.util.setLanguage(s,l),Prism.util.setLanguage(n,l);var h=Prism.plugins.autoloader;h&&h.loadLanguages(l),function(t,i,a){var r=new XMLHttpRequest;r.open("GET",t,!0),r.onreadystatechange=function(){4==r.readyState&&(r.status<400&&r.responseText?function(t){n.setAttribute(e,"loaded");var i=function(t){var e=/^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(t||"");if(e){var i=Number(e[1]),a=e[2],n=e[3];return a?n?[i,Number(n)]:[i,void 0]:[i,i]}}(n.getAttribute("data-range"));if(i){var a=t.split(/\r\n?|\n/g),r=i[0],l=null==i[1]?a.length:i[1];r<0&&(r+=a.length),r=Math.max(0,Math.min(r-1,a.length)),l<0&&(l+=a.length),l=Math.max(0,Math.min(l,a.length)),t=a.slice(r,l).join("\n"),n.hasAttribute("data-start")||n.setAttribute("data-start",String(r+1))}s.textContent=t,Prism.highlightElement(s)}(r.responseText):r.status>=400?a("✖ Error "+r.status+" while fetching file: "+r.statusText):a("✖ Error: File does not exist or is empty"))},r.send(null)}(r,0,(function(t){n.setAttribute(e,"failed"),s.textContent=t}))}})),Prism.plugins.fileHighlight={highlight:function(t){for(var e,a=(t||document).querySelectorAll(i),n=0;e=a[n++];)Prism.highlightElement(e)}};var a=!1;Prism.fileHighlight=function(){a||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),a=!0),Prism.plugins.fileHighlight.highlight.apply(this,arguments)}}}();
</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: 1em;margin: 1em;overflow: auto;}: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;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;position: relative;height: 100%;}.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: white;}.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: 12px;}.CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet {background: transparent;border: 0;color: #778589;cursor: pointer;outline: none;padding: 0;transition: all 0.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: 600;margin-left: 12px;line-height: 48px;max-width: 200px;text-align: center;transition: color 0.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;}
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:600;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 {
Expand All @@ -40,7 +40,8 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
display: flex;
flex-direction: column;
flex-grow: 0;
height: 55vh;
order: 1;
height: 50vh;
position: relative;
}
Expand All @@ -50,10 +51,11 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
flex-shrink: 0;
flex-grow: 1;
flex-basis: 0;
order: 2;
position: relative;
z-index: 1;
overflow: hidden;
background-color: white;
height: 50vh;
}
#main {
Expand Down

0 comments on commit f0640c2

Please sign in to comment.