Source highlighting implementation

[GoogleCodeExporter]

Hello, 
I've implemented client-side source highlighting according to issue
http://code.google.com/p/rietveld/issues/detail?id=25&can=1&q=highlight

Please, look at my changes in the patch. It doesn't  work too slow for big 
files as for me.

Original issue reported on code.google.com by e0ne.user on 15 Feb 2010 at 10:40

Attachments:

• Code_highlightimpplemention(using_prettify_js_lib).patch

[GoogleCodeExporter]

Seems to be pure JavaScript solution. So no server performance impact.

Original comment by alexei.t...@gmail.com on 15 Feb 2010 at 3:56

[GoogleCodeExporter]

hm, I'm not convinced by this approach since it produces some strange results. 
One 
problem seems to be the language detection (how does it work, btw). Sometimes 
the 
highlighting simply seems to be wrong. Another one is the highlighting of 
multi-line 
statements like comments or docstrings since the diff is rendered - and 
highlighted - 
line by line and prettify.js looses context in that case.

Original comment by albrecht.andi on 18 Feb 2010 at 5:58

[GoogleCodeExporter]

Thanks for your comment!

First of all, I want to say that my feature is optional and it's disabled by 
default. 

- language detection: prettify.js can auto detect used language (this method is 
used in my solution). Also we 
can use special attributes to select used language. Maybe it will be good case 
to let users choose which 
language is used or detect it by the file extension (need more CPU time). What 
do you think about this?

- multi-line statements problems: you're right, this is a problem. prettify.js 
doesn't support multi-line 
statements rendered with different tags (e.g. reitveId renders each code line 
as table row tag "<tr>"). 
Resolving this issue will cause a lot of changes  of the server code to render 
such constructs as one html tag.  
I can't say right now anything about CPU time to do it but it could produce 
problems with sync left(old) and 
right(new) panels with code.

Original comment by e0ne.user on 18 Feb 2010 at 6:46

[GoogleCodeExporter]

Original comment by albrecht.andi on 4 Jan 2011 at 8:43

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Issue 256 has been merged into this issue.

Original comment by albrecht.andi on 4 Jan 2011 at 8:43

[GoogleCodeExporter]

That's the most requested feature, so we should definitely do something.

The problem - *syntax highlighting requires whole source* for:
1. Type autodetection
2. Context highlighting (commented sections etc)

So, we can handle the whole source:
1. Server side
2. Client side

For server side. Several approaches:
1. Process source code with pygments every time the source is output (not 
efficient)
2, Process source code with pygments once and store highlighted source, 
stripping the markup before feeding source to diffengine or download (we might 
need to check if transformation will symmetrical, but I can't see where it is 
used)
3. Store highlighted copy in a separate table

Client side solution.
Page size is less an issue for modern projects, so we can just output the whole 
page every time and hide irrelevant regions with JS. Can we?

Original comment by techtonik@gmail.com on 16 Feb 2012 at 6:54

[GoogleCodeExporter]

Original comment by albrecht.andi on 6 Apr 2012 at 7:25

• Added labels: Component-UI