RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-14 06:04:57 +00:00
Code Issues Activity Actions

LibWebView: Extract CSS to highlight HTML source to a constant

Browse source 
We will be re-using (and extending) this style in the WebView-based DOM
inspector.
This commit is contained in:
Timothy Flynn 2023-11-22 11:54:17 -05:00 • committed by Andreas Kling
parent b5162ceabd
commit fcaa994d4e
2 changed files with 48 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

44
Userland/Libraries/LibWebView/SourceHighlighter.cpp
View file

@ -23,51 +23,11 @@ String highlight_source(URL const& url, StringView source)
<meta name="color-scheme" content="dark light">)~~~"sv);
builder.appendff("<title>View Source - {}</title>", url);
builder.appendff("<style type=\"text/css\">{}</style>", HTML_HIGHLIGHTER_STYLE);
builder.append(R"~~~(
<style type="text/css">
html {
font-size: 10pt;
}
@media (prefers-color-scheme: dark) {
/* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
html {
background-color: rgb(30, 30, 30);
color: white;
}
.comment {
color: lightgreen;
}
.tag {
color: orangered;
}
.attribute-name {
color: orange;
}
.attribute-value {
color: deepskyblue;
}
}
@media (prefers-color-scheme: light) {
.comment {
color: green;
}
.tag {
color: red;
}
.attribute-name {
color: darkorange;
}
.attribute-value {
color: blue;
}
}
</style>
</head>
<body>
<pre>
<pre class="html">
)~~~"sv);
size_t previous_position = 0;

46
Userland/Libraries/LibWebView/SourceHighlighter.h
View file

@ -13,4 +13,50 @@ namespace WebView {
String highlight_source(URL const&, StringView);
constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
.html {
font-size: 10pt;
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.tag {
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
/* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
html {
background-color: rgb(30, 30, 30);
color: white;
}
.comment {
color: lightgreen;
}
.tag {
color: orangered;
}
.attribute-name {
color: orange;
}
.attribute-value {
color: deepskyblue;
}
}
@media (prefers-color-scheme: light) {
.comment {
color: green;
}
.tag {
color: red;
}
.attribute-name {
color: darkorange;
}
.attribute-value {
color: blue;
}
}
)~~~"sv;
}