cozis/c2html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doxx

Browse Source
This commit is contained in:
cozis
2022-05-08 02:49:38 +02:00
parent 21dab3eeb1
commit 56d4a6fdf2
2 changed files with 186 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+166 -72
View File
@@ -1,93 +1,187 @@
div.c2h-main {
}
/* This file contains an example stylesheet for the
* HTML output of the c2html tool.
*
* The HTML output generated by c2html has the form:
*
* <div class="c2h-code">
* <div class="c2h-code-inner">
* <table>
* <tr>
* <td> .. line number .. </td>
* <td> .. line code .. </td>
* </tr>
* .. other lines ..
* </table>
* </div>
* </div>
*
*
* Here's a list of the classes that can be generated
* and their meaning:
*
* |
* c2h-identifier | Variables
* |
* c2h-comment | Comments
* |
* c2h-directive | The first keyword of a
* | preprocessor directive.
* | (the keyword that starts
* | with '#').
* |
* c2h-val-str | String listerals. Also the
* | strings between < and >
* | of preprocessor directives
* | are categorized as strings.
* |
* c2h-val-char | Char literals (the ones between
* | 's).
* |
* c2h-val-int | Integer literals.
* |
* c2h-val-flt | Floating point literals.
* |
* c2h-kword | All of the language's keywords
* | (typedef, const, int, etc).
* |
* c2h-kword-* | Also for the language's
* | keywords, but * is substituted
* | with the keyword (e.g. typedef
* | -> c2h-kword-typedef). This
* | lets you color specific
* | keywords independently.
* |
* c2h-operator | Operators (like == and +).
* |
* c2h-fdeclname | The name of a function in its
* | declaration.
* |
* c2h-fcallname | The name of a function in a
* | function call.
* |
*
* Note that the previous class names only apply when
* the c2h- prefix is used, which is the default in the
* CLI but not in the C API.
*
* Most of the following attributes are merely stylistic.
* Some of them though are necessary for a correct
* display of the code. Read the following comments
* to know more.
*
*/
div.c2h-code {
max-height: 600px;
div.c2h-code {
max-height: 600px;
padding: 10px;
border-radius: 3px;
padding: 10px;
border-radius: 3px;
font-family: monospace;
font-size: 16px;
font-family: monospace;
font-size: 16px;
color: white;
background: hsl(210, 15%, 22%);
}
color: white;
background: hsl(210, 15%, 22%);
}
div.c2h-code-inner::-webkit-scrollbar {
width: 10px;
background: transparent;
}
div.c2h-code-inner::-webkit-scrollbar {
width: 10px;
background: transparent;
}
div.c2h-code-inner::-webkit-scrollbar-thumb {
background: hsla(210, 13%, 40%, 0.7);
}
div.c2h-code-inner::-webkit-scrollbar-thumb {
background: hsla(210, 13%, 40%, 0.7);
}
div.c2h-code-inner {
overflow: auto;
height: inherit;
max-height: inherit;
scrollbar-color: hsla(210, 13%, 40%, 0.7) transparent;
}
div.c2h-code-inner {
div.c2h-code table {
border-collapse: collapse;
font-size: inherit;
}
height: inherit;
max-height: inherit;
div.c2h-code table td {
color: white;
vertical-align: top;
}
overflow: auto;
scrollbar-color: hsla(210, 13%, 40%, 0.7) transparent;
}
div.c2h-code table td:first-child {
user-select: none;
text-align: right;
padding: 0 10px;
color: hsla(210, 13%, 40%, 0.7);
}
div.c2h-code table {
border-collapse: collapse;
font-size: inherit;
}
div.c2h-code table td:last-child {
white-space: pre;
}
div.c2h-code table td {
color: white;
.c2h-comment {
color: hsl(221, 12%, 69%);
}
/* The vertical align is nice because for lines that
* are broken in more lines, this makes the line
* number align to the first line.
*/
vertical-align: top;
}
.c2h-val-int,
.c2h-val-flt {
color: hsl(32, 93%, 66%);
}
div.c2h-code table td:first-child {
/* Disabling the selection of the line numbers is
* necessary to be able to only select the code.
*/
user-select: none;
.c2h-val-str,
.c2h-val-char {
color: hsl(114, 31%, 68%);
}
text-align: right;
padding: 0 10px;
color: hsla(210, 13%, 40%, 0.7);
}
.c2h-directive,
.c2h-kword {
color: hsl(300, 30%, 68%);
}
div.c2h-code table td:last-child {
/* This field is suuper important. By default HTML
* collapses sequences of whitespace into one space.
* This isn't good to display code since it removed
* indentation. By applying this attribute to the
* second column of the table (which contains the
* code), the whitespace is preserved.
* NOTE: 'pre' stands for preserve.
*/
white-space: pre;
}
.c2h-kword-static,
.c2h-kword-const {
color: hsl(357, 79%, 65%);
}
/* The rest is just defining the colors for each
* type of token.
*/
.c2h-operator {
color: hsl(13, 93%, 66%);
}
.c2h-comment {
color: hsl(221, 12%, 69%);
}
.c2h-identifier {
color: hsl(219, 28%, 88%);
}
.c2h-val-int,
.c2h-val-flt {
color: hsl(32, 93%, 66%);
}
.c2h-fdeclname {
color: hsl(180, 36%, 54%);
}
.c2h-val-str,
.c2h-val-char {
color: hsl(114, 31%, 68%);
}
.c2h-fcallname {
color: hsl(210, 50%, 60%);
}
.c2h-directive,
.c2h-kword {
color: hsl(300, 30%, 68%);
}
.c2h-kword-static,
.c2h-kword-const {
color: hsl(357, 79%, 65%);
}
.c2h-operator {
color: hsl(13, 93%, 66%);
}
.c2h-identifier {
color: hsl(219, 28%, 88%);
}
.c2h-fdeclname {
color: hsl(180, 36%, 54%);
}
.c2h-fcallname {
color: hsl(210, 50%, 60%);
}