style.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 {
    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%);
}