mirror of
https://github.com/caddyserver/website.git
synced 2025-04-21 20:46:15 -04:00
Use markdown syntax highlighting on frontpage
This commit is contained in:
Francis Lavoie
parent
5e93103dce
commit
babfa3a7c0
11 changed files with 371 additions and 211 deletions
26
new/includes/examples/custom-ca.md
Normal file
26
new/includes/examples/custom-ca.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
window.$('.ex-custom-ca pre.chroma').classList.add('light');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ex-custom-ca">
|
||||
|
||||
```caddy
|
||||
{
|
||||
pki {
|
||||
ca corporate {
|
||||
name "Our Corporation Authority"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
internal.example.com {
|
||||
# ACME endpoint: /acme/corporate/directory
|
||||
acme_server {
|
||||
ca corporate
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
63
new/includes/examples/file-server.md
Normal file
63
new/includes/examples/file-server.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
let startElement, endElement;
|
||||
|
||||
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {');
|
||||
endElement = findNextText(startElement, '}');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
|
||||
|
||||
startElement = findWithContent('.ex-fs pre.chroma code span', 'encode');
|
||||
endElement = findNextText(startElement, 'gzip');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
|
||||
|
||||
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /database/* {');
|
||||
endElement = findNextText(startElement, '}');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
|
||||
|
||||
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /embedded/* {');
|
||||
endElement = findNextText(startElement, '}');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
|
||||
|
||||
startElement = findWithContent('.ex-fs pre.chroma code span', '# (Range/Etag/etc. all work without extra config)');
|
||||
wrapRangeWithSpan(startElement, startElement, 'rollover-range rollover-yellow');
|
||||
|
||||
startElement = findWithContent('.ex-fs pre.chroma code span', 'file_server');
|
||||
endElement = findNextText(startElement, 'browse');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
|
||||
|
||||
window.$('.ex-fs pre.chroma').classList.add('light');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ex-fs">
|
||||
|
||||
```caddy
|
||||
example.com
|
||||
|
||||
root * /var/www
|
||||
|
||||
# Serve precompressed files if present
|
||||
file_server /downloads/* {
|
||||
precompressed gzip zstd br
|
||||
}
|
||||
|
||||
# Compress everything else that would benefit
|
||||
encode zstd gzip
|
||||
|
||||
# Get files from a database
|
||||
file_server /database/* {
|
||||
fs sqlite data.sql
|
||||
}
|
||||
|
||||
# Get files from within the Caddy binary
|
||||
file_server /embedded/* {
|
||||
fs embedded
|
||||
}
|
||||
|
||||
# (Range/Etag/etc. all work without extra config)
|
||||
|
||||
# Serve static site with directory listings as needed
|
||||
file_server browse
|
||||
```
|
||||
|
||||
</div>
|
||||
25
new/includes/examples/json-automate-certs.md
Normal file
25
new/includes/examples/json-automate-certs.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
window.$('.ex-json-automate-certs pre.chroma').classList.add('light');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ex-json-automate-certs">
|
||||
|
||||
```json
|
||||
{
|
||||
"apps": {
|
||||
"tls": {
|
||||
"certificates": {
|
||||
"automate": [
|
||||
"example.com",
|
||||
"sub.example.com",
|
||||
"example.net"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
23
new/includes/examples/local-https.md
Normal file
23
new/includes/examples/local-https.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
window.$('.ex-local-https pre.chroma').classList.add('light');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ex-local-https">
|
||||
|
||||
```caddy
|
||||
localhost {
|
||||
respond "Hello from HTTPS!"
|
||||
}
|
||||
|
||||
192.168.1.10 {
|
||||
respond "Also HTTPS!"
|
||||
}
|
||||
|
||||
http://localhost {
|
||||
respond "Plain HTTP"
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
51
new/includes/examples/proxy.md
Normal file
51
new/includes/examples/proxy.md
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
let startElement, endElement;
|
||||
|
||||
startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi');
|
||||
endElement = findNextText(startElement, '9000');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-php rollover-green');
|
||||
|
||||
startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /api/* {');
|
||||
endElement = findNextText(startElement, '}');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-dynamic-backends rollover-purple');
|
||||
|
||||
startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /service/* {');
|
||||
endElement = findNextText(startElement, '}');
|
||||
wrapRangeWithSpan(startElement, endElement, 'rollover-ha rollover-blue');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ex-proxy">
|
||||
|
||||
```caddy
|
||||
example.com
|
||||
|
||||
# Serve PHP sites
|
||||
handle /blog/* {
|
||||
root * /var/www/wordpress
|
||||
php_fastcgi localhost:9000
|
||||
file_server
|
||||
}
|
||||
|
||||
# Proxy an autoscaling API with dynamic backends
|
||||
reverse_proxy /api/* {
|
||||
dynamic srv _api._tcp.example.com
|
||||
}
|
||||
|
||||
# Proxy a compute-heavy distributed service
|
||||
# with load balancing and health checks
|
||||
reverse_proxy /service/* {
|
||||
to 10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
|
||||
lb_policy least_conn
|
||||
lb_try_duration 10s
|
||||
fail_duration 5s
|
||||
}
|
||||
|
||||
# Proxy everything else to an HTTPS upstream
|
||||
reverse_proxy https://service.example.com {
|
||||
header_up Host {upstream_hostport}
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
25
new/includes/examples/website-caddyfile.md
Normal file
25
new/includes/examples/website-caddyfile.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
window.$('.ex-website-caddyfile pre.chroma').classList.add('light');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ex-website-caddyfile">
|
||||
|
||||
```caddy
|
||||
caddyserver.com
|
||||
|
||||
root * src
|
||||
|
||||
file_server
|
||||
templates # markdown & syntax highlighting!
|
||||
encode zstd gzip
|
||||
|
||||
redir /docs/json /docs/json/
|
||||
rewrite /docs/json/* /docs/json/index.html
|
||||
rewrite /docs/* /docs/index.html
|
||||
|
||||
reverse_proxy /api/* localhost:9002
|
||||
```
|
||||
|
||||
</div>
|
||||
154
new/index.html
154
new/index.html
|
|
@ -138,7 +138,7 @@
|
|||
<span class="site-on">site on</span><br>
|
||||
HTTPS
|
||||
</div>
|
||||
<h2>
|
||||
<h2 id="every-site-https">
|
||||
<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your sites.</b>
|
||||
</h2>
|
||||
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
<section class="light">
|
||||
<div class="section-upset">
|
||||
<div class="wrapper">
|
||||
<h2>The <b>most advanced</b> HTTPS server <b>in the world</b></h2>
|
||||
<h2 id="most-advanced">The <b>most advanced</b> HTTPS server <b>in the world</b></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
</div>
|
||||
|
||||
<div class="demobox">
|
||||
<h2>Experience it</h2>
|
||||
<h2 id="on-demand-demo">Experience it</h2>
|
||||
<p>
|
||||
<b>Discover Caddy's automagic HTTPS features.</b>
|
||||
</p>
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
<section class="diagonal up light gray feature">
|
||||
<div class="wrapper">
|
||||
|
||||
<h2>Deploy your own PKI with Caddy</h2>
|
||||
<h2 id="your-own-pki">Deploy your own PKI with Caddy</h2>
|
||||
<p>
|
||||
Not only is Caddy the industry leader in certificate automation, it also sports a fully-featured PKI suite for your own fully-automated internal PKI and private CAs.
|
||||
</p>
|
||||
|
|
@ -278,17 +278,7 @@
|
|||
<div class="asides">
|
||||
<div>
|
||||
<div class="display left">
|
||||
<code class="light">localhost {
|
||||
respond "Hello from HTTPS!"
|
||||
}
|
||||
|
||||
192.168.1.10 {
|
||||
respond "Also HTTPS!"
|
||||
}
|
||||
|
||||
http://localhost {
|
||||
respond "Plain HTTP"
|
||||
}</code>
|
||||
{{ markdown (include "/includes/examples/local-https.md") }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -312,55 +302,16 @@ http://localhost {
|
|||
</div>
|
||||
<div>
|
||||
<div class="display right">
|
||||
<code class="light">{
|
||||
pki {
|
||||
ca corporate {
|
||||
name "Our Corporation Authority"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
internal.example.com {
|
||||
<span class="comment"># ACME endpoint: /acme/corporate/directory</span>
|
||||
acme_server {
|
||||
ca corporate
|
||||
}
|
||||
}</code></div>
|
||||
<!-- <div class="display right">
|
||||
<code class="light">{
|
||||
pki {
|
||||
ca our_own {
|
||||
name "Our Own Authority"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
internal.example.com {
|
||||
tls {
|
||||
issuer internal {
|
||||
ca our_own
|
||||
}
|
||||
}
|
||||
}</code></div> -->
|
||||
{{ markdown (include "/includes/examples/custom-ca.md") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="asides">
|
||||
<div>
|
||||
<div class="display left">
|
||||
<code class="light">{
|
||||
"apps": {
|
||||
"tls": {
|
||||
"certificates": {
|
||||
"automate": [
|
||||
"example.com",
|
||||
"sub.example.com",
|
||||
"example.net"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></div>
|
||||
{{ markdown (include "/includes/examples/json-automate-certs.md") }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="green">Keep certificates renewed</h3>
|
||||
|
|
@ -391,7 +342,7 @@ internal.example.com {
|
|||
|
||||
<section class="diagonal down dark feature">
|
||||
<div class="wrapper">
|
||||
<h2>A forward-thinking reverse proxy</h2>
|
||||
<h2 id="reverse-proxy">A forward-thinking reverse proxy</h2>
|
||||
<p>
|
||||
Caddy's proxy was designed to be as forward-compatible as possible and has major batteries included: load balancing, active and passive health checks, dynamic upstreams, retries, pluggable transports, and of course, best-in-class TLS security.
|
||||
</p>
|
||||
|
|
@ -419,34 +370,8 @@ internal.example.com {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="display right">
|
||||
<code class="dark">example.com
|
||||
|
||||
<span class="comment"># Serve PHP sites</span>
|
||||
handle /blog/* {
|
||||
root * /var/www/wordpress
|
||||
<span class="rollover-php rollover-green">php_fastcgi localhost:9000</span>
|
||||
file_server
|
||||
}
|
||||
|
||||
<span class="comment"># Proxy an autoscaling API with dynamic backends</span>
|
||||
<span class="rollover-dynamic-backends rollover-purple">reverse_proxy /api/* {
|
||||
dynamic srv _api._tcp.example.com
|
||||
}</span>
|
||||
|
||||
<span class="comment"># Proxy a compute-heavy distributed service
|
||||
# with load balancing and health checks</span>
|
||||
<span class="rollover-ha rollover-blue">reverse_proxy /service/* {
|
||||
to 10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
|
||||
lb_policy least_conn
|
||||
lb_try_duration 10s
|
||||
fail_duration 5s
|
||||
}</span>
|
||||
|
||||
<span class="comment"># Proxy everything else to an HTTPS upstream</span>
|
||||
reverse_proxy https://service.example.com {
|
||||
header_up Host {upstream_hostport}
|
||||
}<div class="blinking"></div></code>
|
||||
<div class="display right dark">
|
||||
{{ markdown (include "/includes/examples/proxy.md") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -482,7 +407,7 @@ reverse_proxy https://service.example.com {
|
|||
</div>
|
||||
|
||||
|
||||
<h2>Production-grade static file server</h2>
|
||||
<h2 id="file-server">Production-grade static file server</h2>
|
||||
<p>
|
||||
Serving static files is a tried-and-true method of delivering sites to numerous clients efficiently. Caddy has a robust file server that can be combined with other middleware features for the ultimate effortless website.
|
||||
</p>
|
||||
|
|
@ -516,33 +441,8 @@ reverse_proxy https://service.example.com {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="display right">
|
||||
<code class="light">example.com
|
||||
|
||||
root * /var/www
|
||||
|
||||
<span class="comment"># Serve precompressed files if present</span>
|
||||
<span class="rollover-compress rollover-blue">file_server /downloads/* {
|
||||
precompressed gzip zstd br
|
||||
}</span>
|
||||
|
||||
<span class="comment"># Compress everything else that would benefit</span>
|
||||
<span class="rollover-compress rollover-blue">encode zstd gzip</span>
|
||||
|
||||
<span class="comment"># Get files from a database</span>
|
||||
<span class="rollover-vfs rollover-green">file_server /database/* {
|
||||
fs sqlite data.sql
|
||||
}</span>
|
||||
|
||||
<span class="comment"># Get files from within the Caddy binary</span>
|
||||
<span class="rollover-vfs rollover-green">file_server /embedded/* {
|
||||
fs embedded
|
||||
}</span>
|
||||
|
||||
<span class="comment rollover-range rollover-yellow"># (Range/Etag/etc. all work without extra config)</span>
|
||||
|
||||
<span class="comment"># Serve static site with directory listings as needed</span>
|
||||
<span class="rollover-browse rollover-purple">file_server browse</span></code>
|
||||
<div class="display right light">
|
||||
{{ markdown (include "/includes/examples/file-server.md") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -560,7 +460,7 @@ root * /var/www
|
|||
|
||||
<section class="light feature">
|
||||
<div class="wrapper">
|
||||
<h2>Flexible configuration compatible with any workflow</h2>
|
||||
<h2 id="flexible-config">Flexible configuration compatible with any workflow</h2>
|
||||
<p>
|
||||
Configure your server your way. Caddy's native configuration format is JSON, and with Caddy's config adapters, you can use any config format you prefer. All configuration is posted through a RESTful admin API, and Caddy's CLI helps you work with config files easily.
|
||||
</p>
|
||||
|
|
@ -610,20 +510,8 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
|
|||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="display right">
|
||||
<code class="light">caddyserver.com
|
||||
|
||||
root * src
|
||||
|
||||
file_server
|
||||
templates
|
||||
encode zstd gzip
|
||||
|
||||
redir /docs/json /docs/json/
|
||||
rewrite /docs/json/* /docs/json/index.html
|
||||
rewrite /docs/* /docs/index.html
|
||||
|
||||
reverse_proxy /api/* localhost:9002</code>
|
||||
<div class="display right light">
|
||||
{{ markdown (include "/includes/examples/website-caddyfile.md") }}
|
||||
<div class="caption">Actual config used by this site.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -689,7 +577,7 @@ reverse_proxy /api/* localhost:9002</code>
|
|||
|
||||
<section class="diagonal up light gray feature">
|
||||
<div class="wrapper">
|
||||
<h2>Unparalleled extensibility</h2>
|
||||
<h2 id="extensibility">Unparalleled extensibility</h2>
|
||||
<p>
|
||||
Caddy is the only server in the world with its novel, modular architecture. At its core, Caddy is a configuration manager that runs apps like an HTTP server, internal certificate authority, TLS certificate manager, process supervisor, and more.
|
||||
</p>
|
||||
|
|
@ -722,7 +610,7 @@ reverse_proxy /api/* localhost:9002</code>
|
|||
|
||||
<section class="light feature">
|
||||
<div class="wrapper">
|
||||
<h2>The <span class="gold">gold standard</span> web server</h2>
|
||||
<h2 id="gold-standard">The <span class="gold">gold standard</span> web server</h2>
|
||||
<p>
|
||||
Caddy has the most robust TLS stack on the market. With stronger memory safety guarantees than OpenSSL (Apache & NGINX) and more advanced certificate automation logic than any other server or utility, Caddy keeps your sites online through problems when other servers... won't.
|
||||
</p>
|
||||
|
|
@ -754,7 +642,7 @@ reverse_proxy /api/* localhost:9002</code>
|
|||
|
||||
<section class="light gray feature">
|
||||
<div class="wrapper">
|
||||
<h2>Recommended by experts</h2>
|
||||
<h2 id="experts-recommend">Recommended by experts</h2>
|
||||
<p>
|
||||
Academic and industry experts recommend Caddy, which has been cited in peer-reviewed journals for its security defaults, best practices, and its uniquely advanced feature set.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@
|
|||
Derived from http://ethanschoonover.com/solarized
|
||||
*/
|
||||
.chroma {
|
||||
/* background: linear-gradient(0deg, #f8fbfd 0%, #edf5fd 100%); */
|
||||
background: linear-gradient(to bottom, #eff7f9, transparent);
|
||||
background: linear-gradient(0deg, #f8fbfd 0%, #edf5fd 100%);
|
||||
color: #254048;
|
||||
}
|
||||
.chroma .c { color: #93a1a1 } /* Comment */
|
||||
|
|
@ -88,75 +87,75 @@
|
|||
Solarized Dark (High Contrast)
|
||||
Derived from http://ethanschoonover.com/solarized
|
||||
*/
|
||||
.dark .chroma {
|
||||
.dark .chroma:not(.light) {
|
||||
background: linear-gradient(to bottom, #24454f, transparent);
|
||||
color: #93a1a1;
|
||||
}
|
||||
.dark .chroma .c { color: #586e75 } /* Comment */
|
||||
.dark .chroma .err { color: #93a1a1 } /* Error */
|
||||
.dark .chroma .g { color: #93a1a1 } /* Generic */
|
||||
.dark .chroma .k { color: #76a507 } /* Keyword */
|
||||
.dark .chroma .l { color: #93a1a1 } /* Literal */
|
||||
.dark .chroma .n { color: #93a1a1 } /* Name */
|
||||
.dark .chroma .o { color: #76a507 } /* Operator */
|
||||
.dark .chroma .x { color: #ec662e } /* Other */
|
||||
.dark .chroma .p { color: #93a1a1 } /* Punctuation */
|
||||
.dark .chroma .cm { color: #586e75 } /* Comment.Multiline */
|
||||
.dark .chroma .cp { color: #76a507 } /* Comment.Preproc */
|
||||
.dark .chroma .c1 { color: #586e75 } /* Comment.Single */
|
||||
.dark .chroma .cs { color: #76a507 } /* Comment.Special */
|
||||
.dark .chroma .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
|
||||
.dark .chroma .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
|
||||
.dark .chroma .gr { color: #dc322f } /* Generic.Error */
|
||||
.dark .chroma .gh { color: #ec662e } /* Generic.Heading */
|
||||
.dark .chroma .gi { color: #76a507 } /* Generic.Inserted */
|
||||
.dark .chroma .go { color: #93a1a1 } /* Generic.Output */
|
||||
.dark .chroma .gp { color: #93a1a1 } /* Generic.Prompt */
|
||||
.dark .chroma .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
|
||||
.dark .chroma .gu { color: #ec662e } /* Generic.Subheading */
|
||||
.dark .chroma .gt { color: #93a1a1 } /* Generic.Traceback */
|
||||
.dark .chroma .kc { color: #ec662e } /* Keyword.Constant */
|
||||
.dark .chroma .kd { color: #0090f5 } /* Keyword.Declaration */
|
||||
.dark .chroma .kn { color: #76a507 } /* Keyword.Namespace */
|
||||
.dark .chroma .kp { color: #76a507 } /* Keyword.Pseudo */
|
||||
.dark .chroma .kr { color: #0090f5 } /* Keyword.Reserved */
|
||||
.dark .chroma .kt { color: #dc322f } /* Keyword.Type */
|
||||
.dark .chroma .ld { color: #93a1a1 } /* Literal.Date */
|
||||
.dark .chroma .m { color: #09a598 } /* Literal.Number */
|
||||
.dark .chroma .s { color: #09a598 } /* Literal.String */
|
||||
.dark .chroma .na { color: #93a1a1 } /* Name.Attribute */
|
||||
.dark .chroma .nb { color: #B58900 } /* Name.Builtin */
|
||||
.dark .chroma .nc { color: #0090f5 } /* Name.Class */
|
||||
.dark .chroma .no { color: #ec662e } /* Name.Constant */
|
||||
.dark .chroma .nd { color: #0090f5 } /* Name.Decorator */
|
||||
.dark .chroma .ni { color: #ec662e } /* Name.Entity */
|
||||
.dark .chroma .ne { color: #ec662e } /* Name.Exception */
|
||||
.dark .chroma .nf { color: #0090f5 } /* Name.Function */
|
||||
.dark .chroma .nl { color: #93a1a1 } /* Name.Label */
|
||||
.dark .chroma .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.dark .chroma .nx { color: #93a1a1 } /* Name.Other */
|
||||
.dark .chroma .py { color: #93a1a1 } /* Name.Property */
|
||||
.dark .chroma .nt { color: #0090f5 } /* Name.Tag */
|
||||
.dark .chroma .nv { color: #0090f5 } /* Name.Variable */
|
||||
.dark .chroma .ow { color: #76a507 } /* Operator.Word */
|
||||
.dark .chroma .w { color: #93a1a1 } /* Text.Whitespace */
|
||||
.dark .chroma .mf { color: #09a598 } /* Literal.Number.Float */
|
||||
.dark .chroma .mh { color: #09a598 } /* Literal.Number.Hex */
|
||||
.dark .chroma .mi { color: #09a598 } /* Literal.Number.Integer */
|
||||
.dark .chroma .mo { color: #09a598 } /* Literal.Number.Oct */
|
||||
.dark .chroma .sb { color: #586e75 } /* Literal.String.Backtick */
|
||||
.dark .chroma .sc { color: #09a598 } /* Literal.String.Char */
|
||||
.dark .chroma .sd { color: #93a1a1 } /* Literal.String.Doc */
|
||||
.dark .chroma .s2 { color: #09a598 } /* Literal.String.Double */
|
||||
.dark .chroma .se { color: #ec662e } /* Literal.String.Escape */
|
||||
.dark .chroma .sh { color: #93a1a1 } /* Literal.String.Heredoc */
|
||||
.dark .chroma .si { color: #09a598 } /* Literal.String.Interpol */
|
||||
.dark .chroma .sx { color: #09a598 } /* Literal.String.Other */
|
||||
.dark .chroma .sr { color: #dc322f } /* Literal.String.Regex */
|
||||
.dark .chroma .s1 { color: #09a598 } /* Literal.String.Single */
|
||||
.dark .chroma .ss { color: #09a598 } /* Literal.String.Symbol */
|
||||
.dark .chroma .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
|
||||
.dark .chroma .vc { color: #0090f5 } /* Name.Variable.Class */
|
||||
.dark .chroma .vg { color: #0090f5 } /* Name.Variable.Global */
|
||||
.dark .chroma .vi { color: #0090f5 } /* Name.Variable.Instance */
|
||||
.dark .chroma .il { color: #09a598 } /* Literal.Number.Integer.Long */
|
||||
.dark .chroma:not(.light) .c { color: #586e75 } /* Comment */
|
||||
.dark .chroma:not(.light) .err { color: #93a1a1 } /* Error */
|
||||
.dark .chroma:not(.light) .g { color: #93a1a1 } /* Generic */
|
||||
.dark .chroma:not(.light) .k { color: #76a507 } /* Keyword */
|
||||
.dark .chroma:not(.light) .l { color: #93a1a1 } /* Literal */
|
||||
.dark .chroma:not(.light) .n { color: #93a1a1 } /* Name */
|
||||
.dark .chroma:not(.light) .o { color: #76a507 } /* Operator */
|
||||
.dark .chroma:not(.light) .x { color: #ec662e } /* Other */
|
||||
.dark .chroma:not(.light) .p { color: #93a1a1 } /* Punctuation */
|
||||
.dark .chroma:not(.light) .cm { color: #586e75 } /* Comment.Multiline */
|
||||
.dark .chroma:not(.light) .cp { color: #76a507 } /* Comment.Preproc */
|
||||
.dark .chroma:not(.light) .c1 { color: #586e75 } /* Comment.Single */
|
||||
.dark .chroma:not(.light) .cs { color: #76a507 } /* Comment.Special */
|
||||
.dark .chroma:not(.light) .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
|
||||
.dark .chroma:not(.light) .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
|
||||
.dark .chroma:not(.light) .gr { color: #dc322f } /* Generic.Error */
|
||||
.dark .chroma:not(.light) .gh { color: #ec662e } /* Generic.Heading */
|
||||
.dark .chroma:not(.light) .gi { color: #76a507 } /* Generic.Inserted */
|
||||
.dark .chroma:not(.light) .go { color: #93a1a1 } /* Generic.Output */
|
||||
.dark .chroma:not(.light) .gp { color: #93a1a1 } /* Generic.Prompt */
|
||||
.dark .chroma:not(.light) .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
|
||||
.dark .chroma:not(.light) .gu { color: #ec662e } /* Generic.Subheading */
|
||||
.dark .chroma:not(.light) .gt { color: #93a1a1 } /* Generic.Traceback */
|
||||
.dark .chroma:not(.light) .kc { color: #ec662e } /* Keyword.Constant */
|
||||
.dark .chroma:not(.light) .kd { color: #0090f5 } /* Keyword.Declaration */
|
||||
.dark .chroma:not(.light) .kn { color: #76a507 } /* Keyword.Namespace */
|
||||
.dark .chroma:not(.light) .kp { color: #76a507 } /* Keyword.Pseudo */
|
||||
.dark .chroma:not(.light) .kr { color: #0090f5 } /* Keyword.Reserved */
|
||||
.dark .chroma:not(.light) .kt { color: #dc322f } /* Keyword.Type */
|
||||
.dark .chroma:not(.light) .ld { color: #93a1a1 } /* Literal.Date */
|
||||
.dark .chroma:not(.light) .m { color: #09a598 } /* Literal.Number */
|
||||
.dark .chroma:not(.light) .s { color: #09a598 } /* Literal.String */
|
||||
.dark .chroma:not(.light) .na { color: #93a1a1 } /* Name.Attribute */
|
||||
.dark .chroma:not(.light) .nb { color: #B58900 } /* Name.Builtin */
|
||||
.dark .chroma:not(.light) .nc { color: #0090f5 } /* Name.Class */
|
||||
.dark .chroma:not(.light) .no { color: #ec662e } /* Name.Constant */
|
||||
.dark .chroma:not(.light) .nd { color: #0090f5 } /* Name.Decorator */
|
||||
.dark .chroma:not(.light) .ni { color: #ec662e } /* Name.Entity */
|
||||
.dark .chroma:not(.light) .ne { color: #ec662e } /* Name.Exception */
|
||||
.dark .chroma:not(.light) .nf { color: #0090f5 } /* Name.Function */
|
||||
.dark .chroma:not(.light) .nl { color: #93a1a1 } /* Name.Label */
|
||||
.dark .chroma:not(.light) .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.dark .chroma:not(.light) .nx { color: #93a1a1 } /* Name.Other */
|
||||
.dark .chroma:not(.light) .py { color: #93a1a1 } /* Name.Property */
|
||||
.dark .chroma:not(.light) .nt { color: #0090f5 } /* Name.Tag */
|
||||
.dark .chroma:not(.light) .nv { color: #0090f5 } /* Name.Variable */
|
||||
.dark .chroma:not(.light) .ow { color: #76a507 } /* Operator.Word */
|
||||
.dark .chroma:not(.light) .w { color: #93a1a1 } /* Text.Whitespace */
|
||||
.dark .chroma:not(.light) .mf { color: #09a598 } /* Literal.Number.Float */
|
||||
.dark .chroma:not(.light) .mh { color: #09a598 } /* Literal.Number.Hex */
|
||||
.dark .chroma:not(.light) .mi { color: #09a598 } /* Literal.Number.Integer */
|
||||
.dark .chroma:not(.light) .mo { color: #09a598 } /* Literal.Number.Oct */
|
||||
.dark .chroma:not(.light) .sb { color: #586e75 } /* Literal.String.Backtick */
|
||||
.dark .chroma:not(.light) .sc { color: #09a598 } /* Literal.String.Char */
|
||||
.dark .chroma:not(.light) .sd { color: #93a1a1 } /* Literal.String.Doc */
|
||||
.dark .chroma:not(.light) .s2 { color: #09a598 } /* Literal.String.Double */
|
||||
.dark .chroma:not(.light) .se { color: #ec662e } /* Literal.String.Escape */
|
||||
.dark .chroma:not(.light) .sh { color: #93a1a1 } /* Literal.String.Heredoc */
|
||||
.dark .chroma:not(.light) .si { color: #09a598 } /* Literal.String.Interpol */
|
||||
.dark .chroma:not(.light) .sx { color: #09a598 } /* Literal.String.Other */
|
||||
.dark .chroma:not(.light) .sr { color: #dc322f } /* Literal.String.Regex */
|
||||
.dark .chroma:not(.light) .s1 { color: #09a598 } /* Literal.String.Single */
|
||||
.dark .chroma:not(.light) .ss { color: #09a598 } /* Literal.String.Symbol */
|
||||
.dark .chroma:not(.light) .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
|
||||
.dark .chroma:not(.light) .vc { color: #0090f5 } /* Name.Variable.Class */
|
||||
.dark .chroma:not(.light) .vg { color: #0090f5 } /* Name.Variable.Global */
|
||||
.dark .chroma:not(.light) .vi { color: #0090f5 } /* Name.Variable.Instance */
|
||||
.dark .chroma:not(.light) .il { color: #09a598 } /* Literal.Number.Integer.Long */
|
||||
|
|
|
|||
|
|
@ -200,12 +200,15 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
transition: background-color 250ms;
|
||||
}
|
||||
|
||||
.rollover-green.show { background-color: #41e68fc7; }
|
||||
.rollover-purple.show { background-color: #a52fa59d; }
|
||||
.rollover-blue.show { background-color: #0a62aaa3; }
|
||||
.rollover-yellow.show { background-color: #ffcb50; }
|
||||
|
||||
.dark .rollover-green.show { background-color: #41e68e2b; }
|
||||
.dark .rollover-purple.show { background-color: #a52fa55f; }
|
||||
.dark .rollover-blue.show { background-color: #0a62aa5b; }
|
||||
.dark .rollover-yellow.show { background-color: #ffcb5064; }
|
||||
|
||||
.light .rollover-green.show { background-color: #41e68e4b; }
|
||||
.light .rollover-purple.show { background-color: #a52fa545; }
|
||||
.light .rollover-blue.show { background-color: #0a62aa3a; }
|
||||
.light .rollover-yellow.show { background-color: #ffcb5064; }
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ h1 .subheading b {
|
|||
|
||||
p,
|
||||
h2 {
|
||||
max-width: 850px;
|
||||
max-width: 950px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,63 @@ function cloneTemplate(tplSelector) {
|
|||
// return document.importNode(elem.content, true);
|
||||
}
|
||||
|
||||
// Find the first element matching a selector which contains the specified text
|
||||
function findWithContent(selector, text) {
|
||||
const selected = document.querySelectorAll(selector);
|
||||
let found = null;
|
||||
selected.forEach(element => {
|
||||
if (element.textContent.includes(text)) {
|
||||
found = element;
|
||||
}
|
||||
});
|
||||
return found;
|
||||
}
|
||||
|
||||
// Find the next element containing the specified text
|
||||
function findNextText(startElement, nextText) {
|
||||
let currentElement = startElement.nextSibling;
|
||||
while (currentElement) {
|
||||
if (currentElement.textContent.includes(nextText)) {
|
||||
return currentElement;
|
||||
}
|
||||
currentElement = currentElement.nextSibling;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Function to wrap the range between startElement and endElement in a new span
|
||||
function wrapRangeWithSpan(startElement, endElement, className) {
|
||||
// Check if startElement and endElement are the same
|
||||
if (startElement === endElement) {
|
||||
const span = document.createElement('span');
|
||||
span.className = className;
|
||||
span.appendChild(startElement.cloneNode(true));
|
||||
startElement.parentNode.replaceChild(span, startElement);
|
||||
return span;
|
||||
}
|
||||
|
||||
// Create a new span element
|
||||
const span = document.createElement('span');
|
||||
span.className = className;
|
||||
|
||||
// Reference the parent node of the common ancestor
|
||||
const parent = startElement.parentNode;
|
||||
|
||||
// Iterate through siblings and wrap them in the span
|
||||
const toRemove = [];
|
||||
for (var node = startElement; node; node = node.nextSibling) {
|
||||
var clonedNode = node.cloneNode(true);
|
||||
span.appendChild(clonedNode);
|
||||
if (node === endElement) {
|
||||
parent.replaceChild(span, endElement);
|
||||
toRemove.forEach(node => parent.removeChild(node));
|
||||
break;
|
||||
}
|
||||
toRemove.push(node);
|
||||
}
|
||||
|
||||
return span;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue