doxx

README.md

@@ -16,12 +16,15 @@ the output is
         <td>1</td>
         <td>
           <span class="c2h-kword c2h-kword-int">int</span> <span class="c2h-identifier">a</span>;
-        </td></tr>
+        </td>
+      </tr>
     </table>
   </div>
 </div>
 ```
-therefore you can apply custom color schemes by selecting the tokens from your CSS. A default stylesheet you can use is provided in `style.css`.
+therefore you can apply custom color schemes by selecting the tokens from your CSS. 
+
+A default stylesheet you can use is provided in `style.css`. It's also well documented, so that you can go off and write your own!
 
 # Index
 1. [Install](#install)
@@ -35,21 +38,6 @@ therefore you can apply custom color schemes by selecting the tokens from your C
     1. [Using the library](#using-the-library)
 1. [License](#license)
 
-# Install
-
-## Supported platforms
-The code is very portable so it's possible to run it everywhere, although there are only build and install scripts for \*nix systems.
-
-## Install the library
-There is no particular way to install the library. The code is so small that you can just drop `c2html.c` and `c2html.h` in your project and use then as they were your own.
-
-## Install the command-line interface
-To install the `c2html` command under **linux**, you first have to build it by running `build.sh`, then you can install it with `install.sh`.
-
-You may need to give these scripts execution privileges first. You can do that by running `chmod +x build.sh` and `chmod +x install.sh`.
-
-Once the CLI is installed, you'll be able to use the `c2html` command in your terminal.
-
 # Usage
 c2html comes both as a C library and a command-line utility. 
 
@@ -122,6 +110,21 @@ when executed, the output will be:
 
 ```
 
+# Install
+
+## Supported platforms
+The code is very portable so it's possible to run it everywhere, although there are only build and install scripts for \*nix systems.
+
+## Install the library
+There is no particular way to install the library. The code is so small that you can just drop `c2html.c` and `c2html.h` in your project and use then as they were your own.
+
+## Install the command-line interface
+To install the `c2html` command under **linux**, you first have to build it by running `build.sh`, then you can install it with `install.sh`.
+
+You may need to give these scripts execution privileges first. You can do that by running `chmod +x build.sh` and `chmod +x install.sh`.
+
+Once the CLI is installed, you'll be able to use the `c2html` command in your terminal.
+
 # License
 This is free and unencumbered software released into the public domain.
 

style.css

@@ -1,8 +1,78 @@
 
-    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 {
+div.c2h-code {
     max-height: 600px;
 
     padding: 10px;
@@ -13,81 +83,105 @@
 
     color: white;
     background: hsl(210, 15%, 22%);
-    }
+}
 
-    div.c2h-code-inner::-webkit-scrollbar {
+div.c2h-code-inner::-webkit-scrollbar {
     width: 10px;
     background: transparent;
-    }
+}
 
-    div.c2h-code-inner::-webkit-scrollbar-thumb {
+div.c2h-code-inner::-webkit-scrollbar-thumb {
     background: hsla(210, 13%, 40%, 0.7);
-    }
+}
+
+div.c2h-code-inner {
 
-    div.c2h-code-inner {
-        overflow: auto;
     height: inherit;
     max-height: inherit;
-        scrollbar-color: hsla(210, 13%, 40%, 0.7) transparent;
-    }
 
-    div.c2h-code table {
+    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 {
+div.c2h-code table td {
     color: white;
-        vertical-align: top;
-    }
 
-    div.c2h-code table td:first-child {
+    /* 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 {
+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-comment {
+/* The rest is just defining the colors for each
+ * type of token.
+ */
+
+.c2h-comment {
     color: hsl(221, 12%, 69%);
-    }
+}
 
-    .c2h-val-int,
+.c2h-val-int,
-    .c2h-val-flt {
+.c2h-val-flt {
     color: hsl(32, 93%, 66%);
-    }
+}
 
-    .c2h-val-str,
+.c2h-val-str,
-    .c2h-val-char {
+.c2h-val-char {
     color: hsl(114, 31%, 68%);
-    }
+}
 
-    .c2h-directive,
+.c2h-directive,
-    .c2h-kword {
+.c2h-kword {
     color: hsl(300, 30%, 68%);
-    }
+}
 
-    .c2h-kword-static,
+.c2h-kword-static,
-    .c2h-kword-const {
+.c2h-kword-const {
     color: hsl(357, 79%, 65%);
-    }
+}
 
-    .c2h-operator {
+.c2h-operator {
     color: hsl(13, 93%, 66%);
-    }
+}
 
-    .c2h-identifier {
+.c2h-identifier {
     color: hsl(219, 28%, 88%);
-    }
+}
 
-    .c2h-fdeclname {
+.c2h-fdeclname {
     color: hsl(180, 36%, 54%);
-    }
+}
 
-    .c2h-fcallname {
+.c2h-fcallname {
     color: hsl(210, 50%, 60%);
-    }
+}