Skip to content

Chroma: Added code to bound the width of the codeblock #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 13, 2025
Merged

Chroma: Added code to bound the width of the codeblock #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ea5f51
Chroma: Add vs theme to mainframe
nginx-jack Mar 13, 2025
17de998
Chroma: Added code to bound the width of the codeblock
lamATnginx Mar 13, 2025
8d42a1d
Chroma: Remove hardcoding solution
lamATnginx Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions assets/css/v2/highlight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/* Generated using: hugo gen chromastyles --style=vs */

/* Background */ .bg { background-color:#fff; }
/* PreWrapper */ .chroma { background-color:#fff; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { }
/* CodeLine */ .chroma .cl { }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#00f }
/* KeywordConstant */ .chroma .kc { color:#00f }
/* KeywordDeclaration */ .chroma .kd { color:#00f }
/* KeywordNamespace */ .chroma .kn { color:#00f }
/* KeywordPseudo */ .chroma .kp { color:#00f }
/* KeywordReserved */ .chroma .kr { color:#00f }
/* KeywordType */ .chroma .kt { color:#2b91af }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { }
/* NameBuiltin */ .chroma .nb { }
/* NameBuiltinPseudo */ .chroma .bp { }
/* NameClass */ .chroma .nc { color:#2b91af }
/* NameConstant */ .chroma .no { }
/* NameDecorator */ .chroma .nd { }
/* NameEntity */ .chroma .ni { }
/* NameException */ .chroma .ne { }
/* NameFunction */ .chroma .nf { }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { }
/* NameNamespace */ .chroma .nn { }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { }
/* NameVariable */ .chroma .nv { }
/* NameVariableClass */ .chroma .vc { }
/* NameVariableGlobal */ .chroma .vg { }
/* NameVariableInstance */ .chroma .vi { }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color:#a31515 }
/* LiteralStringAffix */ .chroma .sa { color:#a31515 }
/* LiteralStringBacktick */ .chroma .sb { color:#a31515 }
/* LiteralStringChar */ .chroma .sc { color:#a31515 }
/* LiteralStringDelimiter */ .chroma .dl { color:#a31515 }
/* LiteralStringDoc */ .chroma .sd { color:#a31515 }
/* LiteralStringDouble */ .chroma .s2 { color:#a31515 }
/* LiteralStringEscape */ .chroma .se { color:#a31515 }
/* LiteralStringHeredoc */ .chroma .sh { color:#a31515 }
/* LiteralStringInterpol */ .chroma .si { color:#a31515 }
/* LiteralStringOther */ .chroma .sx { color:#a31515 }
/* LiteralStringRegex */ .chroma .sr { color:#a31515 }
/* LiteralStringSingle */ .chroma .s1 { color:#a31515 }
/* LiteralStringSymbol */ .chroma .ss { color:#a31515 }
/* LiteralNumber */ .chroma .m { }
/* LiteralNumberBin */ .chroma .mb { }
/* LiteralNumberFloat */ .chroma .mf { }
/* LiteralNumberHex */ .chroma .mh { }
/* LiteralNumberInteger */ .chroma .mi { }
/* LiteralNumberIntegerLong */ .chroma .il { }
/* LiteralNumberOct */ .chroma .mo { }
/* Operator */ .chroma .o { }
/* OperatorWord */ .chroma .ow { color:#00f }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color:#008000 }
/* CommentHashbang */ .chroma .ch { color:#008000 }
/* CommentMultiline */ .chroma .cm { color:#008000 }
/* CommentSingle */ .chroma .c1 { color:#008000 }
/* CommentSpecial */ .chroma .cs { color:#008000 }
/* CommentPreproc */ .chroma .cp { color:#00f }
/* CommentPreprocFile */ .chroma .cpf { color:#00f }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { }
/* GenericHeading */ .chroma .gh { font-weight:bold }
/* GenericInserted */ .chroma .gi { }
/* GenericOutput */ .chroma .go { }
/* GenericPrompt */ .chroma .gp { font-weight:bold }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { font-weight:bold }
/* GenericTraceback */ .chroma .gt { }
/* GenericUnderline */ .chroma .gl { }
/* TextWhitespace */ .chroma .w { }
11 changes: 11 additions & 0 deletions assets/css/v2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -978,6 +978,17 @@ blockquote p:last-child {
}

/* Codeblocks */
.highlight {
position: relative;
z-index: -1;

code .cl {
position: relative;
width: 100%;
white-space: pre-wrap;
}
}

.highlight-mf {
grid-column: 1 / -1 !important;
position: relative;
Expand Down
116 changes: 116 additions & 0 deletions exampleSite/content/nginx/installing-nginx-open-source.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,122 @@ toc: true
weight: 200
---

```nginx

# Global Configuration
user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
worker_connections 1024;
}

http {
include /etc/nginx/mime.types;
default_type application/octet-stream;

log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log /var/log/nginx/access.log main;

sendfile on;
keepalive_timeout 65;

# Standalone IP addresses for upstream definitions
upstream backend {
server 192.168.0.1:8080; # IP address without a port
server 192.168.0.2; # Another standalone IP
server 10.0.0.1 max_fails=2 fail_timeout=10s; # Failover setup
}

# Proxy settings
server {
listen 80;
server_name www.example.com;

root /usr/share/nginx/html;

location /api/ {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://192.168.1.100; # Proxying to an IP without a port
}

location /images/ {
root /img;
autoindex on;
}
}

# ACL with standalone IP ranges
acl_list {
allow 192.168.1.0; # Specific single IP without port
allow 192.168.0.0/16; # IP range without ports
deny 10.1.0.1; # Single forbidden IP
}

# Static file serving with regex
location ~* \.(gif|png|jpg|jpeg)$ {
expires 30d;
access_log off;
}

# Standalone IPs used for error logging
error_log /var/log/nginx/error.log warn;
error_log 192.168.1.200; # Logs sent to external IP
}

server {
listen 443 ssl;
server_name secure.example.com;

ssl_certificate /etc/nginx/ssl/server.crt;
ssl_certificate_key /etc/nginx/ssl/server.key;

root /usr/share/nginx/secure_html;

location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass 127.0.0.1; # PHP processing via standalone IP (localhost IP)
include fastcgi_params;
}

location /logs/ {
deny all; # Deny presence of specific logs
}
}

server {
listen 8080;
server_name localhost;

# Error page definitions
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

```

```js
function hello() {
// this is a comment
console.log("Hello world!");
const thing = ["a", "string", "array"];
}
```

This article explains how to install NGINX Open Source.

<span id="stable_vs_mainline"></span>
Expand Down
3 changes: 2 additions & 1 deletion exampleSite/hugo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ maxAge = -1
[markup.goldmark.renderer]
unsafe = true
[markup.highlight]
guessSyntax = true
guessSyntax = true
noClasses = false
26 changes: 0 additions & 26 deletions layouts/_default/_markup/render-codeblock.html
View file
Open in desktop

This file was deleted.

6 changes: 1 addition & 5 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
}
});

const v2cssIds = ["css7"];
const v2cssIds = ["css7", "css9"];
v2cssIds.forEach((cssId) => {
const element = document.getElementById(cssId);
if (element !== null) {
Expand All @@ -75,10 +75,6 @@
table.style.display = isNewTheme ? "none" : "";
});

document.querySelectorAll(".highlight").forEach((codeblock) => {
codeblock.style.display = isNewTheme ? "none" : "";
});

const mfElements = ['[data-mf="true"]'];
mfElements.forEach((elementId) => {
document.querySelectorAll(elementId).forEach((element) => {
Expand Down
4 changes: 4 additions & 0 deletions layouts/partials/styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
{{ $css6 := resources.Get "css/coveo.css" }}
{{ $css7 := resources.Get "css/v2/style.css" }}
{{ $css8 := resources.Get "css/inline-overrides.css" }}
{{ $css9 := resources.Get "css/v2/highlight.css" }}

<!-- load v2 theme assets -->
<link href="{{ $css7.RelPermalink }}" integrity="{{ $css7.Data.Integrity }}" rel="stylesheet" type="text/css" id="css7"
Expand All @@ -14,6 +15,9 @@
{{ $cssInter := resources.Get "css/inter/inter.css" | fingerprint "sha512" }}
<link href="{{ $cssInter.RelPermalink }}" integrity="{{ $cssInter.Data.Integrity }}" rel="stylesheet" type="text/css"
id="cssInter">

{{ $cssHighlight := $css9 | minify | fingerprint "sha512"}}
<link href="{{ $cssHighlight.RelPermalink }}" rel="stylesheet" type="text/css" id="css9">
<!-- end v2 theme assets -->


Expand Down
Loading