Feature request #1301: Syntax coloring of code snippets

<pre lang="ruby">def hello
  puts "hello world"
end</pre>

Comments

1. Greg Hurrell 2009-05-24T17:49:56Z

   Product changed:

   • From: wincent.dev
   • To: wikitext

2. Greg Hurrell 2009-05-24T17:49:59Z

   Status changed:

   • From: new
   • To: open

3. Greg Hurrell 2009-05-24T19:29:46Z

   This is one option which wouldn't require any server-side shenanigans; just highlighting done on the client-side in the browser via JavaScript:

   • http://jquery.com/demo/code/

   Discovered here.

4. Greg Hurrell 2009-05-26T12:00:00Z

   See also:

   • http://svn.danwebb.net/external/CodeHighlighter/

5. Greg Hurrell 2009-05-26T12:03:26Z

   Another similar project (much more recent, dated 2009):

   • http://alexgorbatchev.com/wiki/SyntaxHighlighter

6. Greg Hurrell 2009-05-26T12:18:09Z

   Would make sense to combine this with automatic line-numbering a well, I think.

7. Greg Hurrell 2009-05-26T16:16:53Z

   Ok, the wikitext side of this is now implemented.

   The rest of the work has to be done in the application layer.

8. Greg Hurrell 2009-05-26T16:18:48Z

   Product changed:

   • From: wikitext
   • To: wincent.dev

9. Greg Hurrell 2009-05-26T17:29:45Z

   On adding line numbers:

   • on line numbers getting copied: http://trac.edgewall.org/ticket/7055
   • toggleable numbers: http://www.leancrew.com/all-this/2007/12/source-code-line-numbers-and-javascript/
   • http://meddle.dzygn.com/eng/weblog/line.numbers/
   • http://drupal.org/node/393500
     • on using the CSS counter-increment property; alt link
     • the source: http://www.w3.org/TR/CSS2/generate.html#counters
     • a tutorial: http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/
   • http://softwaremaniacs.org/forum/highlightjs/1362/

   Check out the source code browser on any code.google.com project (for example) to see an example of a line number implementation which doesn't pollute copied text with unwanted line numbers, at the cost of being unwrapped (which is what my "pre" block CSS does currently anyway).

10. Greg Hurrell 2009-05-26T18:02:35Z

    Here's a little test I just did in the Safari snippet editor:

    <style type="text/css">
      pre span.line-number {
        counter-increment: line-number;
        text-align: right;
        float:left;
        padding-right: 1em;
        width: 3em;
        color: gray;
      }
      pre span.line-number:before {
        content: counter(line-number);
      }
    </style> 
    
    <pre class="c-syntax"><span class="line-number"></span>void normalize_options(options_t *options)
    <span class="line-number"></span>{
    <span class="line-number"></span>    if (options->recurse == -1)
    <span class="line-number"></span>        options->recurse = 0;
    <span class="line-number"></span>    if (options->regex == -1)
    <span class="line-number"></span>        options->regex = 0;
    <span class="line-number"></span>    if (options->case_insensitive == -1)
    <span class="line-number"></span>        options->case_insensitive = 0;
    <span class="line-number"></span>    if (options->global == -1)
    <span class="line-number"></span>        options->global = 0;
    <span class="line-number"></span>    if (options->preview == -1)
    <span class="line-number"></span>        options->preview = 0;
    <span class="line-number"></span>    if (options->gui == -1)
    <span class="line-number"></span>        options->gui = 0;
    <span class="line-number"></span>    if (options->dry_run == -1)
    <span class="line-number"></span>        options->dry_run = 0;
    <span class="line-number"></span>    if (options->verbose == -1)
    <span class="line-number"></span>        options->verbose = 0;
    <span class="line-number"></span>}</pre>

    Works in Firefox too.

11. Greg Hurrell 2009-05-26T18:23:13Z

    Ok, line number is now implemented in the app.

12. Greg Hurrell 2009-05-27T17:43:36Z

    Ok, the syntax coloring engine is done too.

    Here's a preview; bear in mind the colors are quite garish and ugly and are only for debugging purposes, and I've only added a few highlighting rules so there is still quite a bit more to be added:

    

13. Greg Hurrell 2009-06-25T12:17:14Z

    Status changed:

    • From: open
    • To: closed

Add a comment

Comments are now closed for this issue.