186 lines
4.4 KiB
CSS
186 lines
4.4 KiB
CSS
|
|
/* 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,
|
|
* but some are necessary for a correct display of the
|
|
* code. Read the following comments to know more.
|
|
*
|
|
*/
|
|
|
|
div.c2h-code {
|
|
max-height: 600px;
|
|
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
|
|
font-family: monospace;
|
|
font-size: 16px;
|
|
|
|
color: white;
|
|
background: hsl(210, 15%, 22%);
|
|
}
|
|
|
|
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 {
|
|
|
|
height: inherit;
|
|
max-height: inherit;
|
|
|
|
overflow: auto;
|
|
scrollbar-color: hsla(210, 13%, 40%, 0.7) transparent;
|
|
}
|
|
|
|
div.c2h-code table {
|
|
border-collapse: collapse;
|
|
font-size: inherit;
|
|
}
|
|
|
|
div.c2h-code table td {
|
|
color: white;
|
|
|
|
/* 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;
|
|
}
|
|
|
|
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;
|
|
|
|
text-align: right;
|
|
padding: 0 10px;
|
|
color: hsla(210, 13%, 40%, 0.7);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* The rest is just defining the colors for each
|
|
* type of token.
|
|
*/
|
|
|
|
.c2h-comment {
|
|
color: hsl(221, 12%, 69%);
|
|
}
|
|
|
|
.c2h-val-int,
|
|
.c2h-val-flt {
|
|
color: hsl(32, 93%, 66%);
|
|
}
|
|
|
|
.c2h-val-str,
|
|
.c2h-val-char {
|
|
color: hsl(114, 31%, 68%);
|
|
}
|
|
|
|
.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%);
|
|
} |