diff --git a/README.md b/README.md index 12d8b8b..f486b8d 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,15 @@ the output is 1 int a; - + + ``` -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. diff --git a/style.css b/style.css index cff936e..06a94bc 100644 --- a/style.css +++ b/style.css @@ -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: + * + *
+ *
+ * + * + * + * + * + * .. other lines .. + *
.. line number .. .. line code ..
+ *
+ *
+ * + * + * 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%); - } \ No newline at end of file +.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%); +} \ No newline at end of file