Skip to content

Commit ad0f1c3

Browse files
mborlandmborland
committed
Add better C++ stylesheet
1 parent 4bde007 commit ad0f1c3

File tree

2 files changed

+140
-0
lines changed

2 files changed

+140
-0
lines changed

‎doc/supplemental-ui/css/site-extra.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/* Overall code block styling - Modern dark theme */
2+
.listingblock .content pre,
3+
.listingblock .content pre.highlight,
4+
pre.highlight code.language-c\+\+ {
5+
background-color: #1e1e2e !important;
6+
border: 1px solid #313244 !important;
7+
border-radius: 8px !important;
8+
padding: 1.25rem !important;
9+
overflow-x: auto !important;
10+
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
11+
font-size: 0.9rem !important;
12+
line-height: 1.6 !important;
13+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
14+
}
15+
16+
/* Base code color */
17+
.listingblock code,
18+
code.language-c\+\+,
19+
code.hljs {
20+
color: #cdd6f4 !important;
21+
background: transparent !important;
22+
}
23+
24+
/* C++ Syntax Highlighting - highlight.js classes */
25+
26+
/* Keywords (int, if, else, while, return, constexpr, etc.) */
27+
.hljs-keyword,
28+
.hljs-selector-tag {
29+
color: #cba6f7 !important; /* Purple */
30+
font-weight: 600 !important;
31+
}
32+
33+
/* Built-in types and namespaces (std, boost, etc.) */
34+
.hljs-built_in {
35+
color: #89dceb !important; /* Cyan */
36+
}
37+
38+
/* Strings */
39+
.hljs-string,
40+
.hljs-selector-attr,
41+
.hljs-selector-pseudo {
42+
color: #a6e3a1 !important; /* Green */
43+
}
44+
45+
/* Comments */
46+
.hljs-comment,
47+
.hljs-quote {
48+
color: #6c7086 !important; /* Gray */
49+
font-style: italic !important;
50+
}
51+
52+
/* Preprocessor directives (#include, #define, #ifndef, etc.) */
53+
.hljs-meta {
54+
color: #f9e2af !important; /* Yellow */
55+
}
56+
57+
/* Meta keywords inside preprocessor (include, define, etc.) */
58+
.hljs-meta-keyword {
59+
color: #fab387 !important; /* Peach */
60+
font-weight: 500 !important;
61+
}
62+
63+
/* Meta strings (header files in #include) */
64+
.hljs-meta-string {
65+
color: #a6e3a1 !important; /* Green */
66+
}
67+
68+
/* Types and class names */
69+
.hljs-type,
70+
.hljs-class .hljs-title,
71+
.hljs-title.class_ {
72+
color: #89dceb !important; /* Cyan */
73+
font-weight: 500 !important;
74+
}
75+
76+
/* Function names */
77+
.hljs-function .hljs-title,
78+
.hljs-title.function_ {
79+
color: #89b4fa !important; /* Blue */
80+
font-weight: 500 !important;
81+
}
82+
83+
/* Numbers */
84+
.hljs-number,
85+
.hljs-literal {
86+
color: #fab387 !important; /* Peach */
87+
}
88+
89+
/* Operators and punctuation */
90+
.hljs-operator,
91+
.hljs-punctuation {
92+
color: #94e2d5 !important; /* Teal */
93+
}
94+
95+
/* Variables and parameters */
96+
.hljs-variable,
97+
.hljs-params {
98+
color: #cdd6f4 !important; /* Light gray */
99+
}
100+
101+
/* Template parameters */
102+
.hljs-template-tag {
103+
color: #f5c2e7 !important; /* Pink */
104+
}
105+
106+
/* Attributes */
107+
.hljs-attribute {
108+
color: #f38ba8 !important; /* Red */
109+
}
110+
111+
/* Selection highlighting */
112+
.listingblock ::selection,
113+
.hljs ::selection {
114+
background-color: #45475a !important;
115+
color: #f5e0dc !important;
116+
}
117+
118+
/* Optional: Line numbers if you add them later */
119+
.listingblock .linenos,
120+
.hljs-ln-numbers {
121+
color: #585b70 !important;
122+
margin-right: 1rem !important;
123+
padding-right: 0.5rem !important;
124+
border-right: 1px solid #313244 !important;
125+
user-select: none !important;
126+
}
127+
128+
/* Make sure inline code also gets styled */
129+
code.hljs-inline {
130+
background-color: #313244 !important;
131+
padding: 0.2em 0.4em !important;
132+
border-radius: 3px !important;
133+
font-size: 0.85em !important;
134+
}

‎doc/supplemental-ui/partials/head-styles.hbs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
2+
<style>
3+
/* Force override all highlight.js default themes */
4+
.hljs { background: none !important; color: inherit !important; }
5+
</style>
6+
<link rel="stylesheet" href="{{uiRootPath}}/css/site-extra.css">

0 commit comments

Comments
 (0)