Completely unfair comparison of Javascript syntax highlighters » комментарииhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/2014-07-05T06:18:22.968020-07:00Иван Сагалаев о программировании и веб-разработкеhttp://softwaremaniacs.org/media/sm_org/style/photo.jpgAvi Aryan на "Completely unfair comparison of Javascript syntax highlighters"
2014-07-05T06:18:22.968020-07:00Avi Aryanhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-494248I am a Syntax Highlighter user and it badly needs an update. The last stable version 3.0.83 was released on July, 2010. Thanks to your review, I find it very plausible to migrate to highlight.js now.
<p>I am a Syntax Highlighter user and it badly needs an update. The last stable version 3.0.83 was released on July, 2010. Thanks to your review, I find it very plausible to migrate to highlight.js now.Raghavendra Samant на "Completely unfair comparison of Javascript syntax highlighters"
2014-04-03T20:35:06.535857-07:00Raghavendra Samanthttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-493320SyntaxHighlighter 3x seems to have improved significantly since this analysis was done. You can easily select-all : copy the code snippet. pretify XML easily.. highlight lines of codes etc.. so found it much for user-friendly !
<p>SyntaxHighlighter 3x seems to have improved significantly since this analysis was done.</p>
<p>You can easily select-all : copy the code snippet. pretify XML easily.. highlight lines of codes etc.. so found it much for user-friendly !WordPress code block plugins, I choose Crayon | Jeff Huffstetler на "Completely unfair comparison of Javascript syntax highlighters"
2014-02-21T09:37:04.034540-08:00WordPress code block plugins, I choose Crayon | Jeff Huffstetlerhttp://jeff.akoqua.com/?p=24https://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-395382http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/
<p><a href="http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/">http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/</a>Syntax highlighters for blogs and technology websites – ProAppers Blog на "Completely unfair comparison of Javascript syntax highlighters"
2013-10-25T09:09:00.169783-07:00Syntax highlighters for blogs and technology websites – ProAppers Bloghttp://www.proappers.com/blog/61-syntax-highlighters-for-blogs-and-technology-websites.phphttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-274136And a comparing blog post on the Software Maniacs Blog.
<p>And a comparing blog post on the Software Maniacs Blog.Visoft, Inc. Blogs | Moving to highlight.js на "Completely unfair comparison of Javascript syntax highlighters"
2013-01-03T19:36:02.209601-08:00Visoft, Inc. Blogs | Moving to highlight.jshttp://blogs.visoftinc.com/2013/01/03/moving-to-highlight-js/https://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-227465There are a ton of syntax highlighting options available. I came across highlight.js reading the Completely Unfair Comparison of JavaScript Syntax Highlighters. After looking at various options, I decided to give highlight.js a try within the workflow of working with Markdown.
<p>There are a ton of syntax highlighting options available. I came across highlight.js reading the Completely Unfair Comparison of JavaScript Syntax Highlighters. After looking at various options, I decided to give highlight.js a try within the workflow of working with Markdown.HTML Elements ← Mmm.. Immersive на "Completely unfair comparison of Javascript syntax highlighters"
2012-11-09T12:40:37.108760-08:00HTML Elements ← Mmm.. Immersivehttp://18hats.net/m/wp/archives/1/html-elementshttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-195756Details for highlight.js ... Step 1. intall wp-highlight.js WordPress plugin Step 2. optionally, replace wp/wp-content/wp-highlights/ with a custom configured wp-highlight.js Step 3. review highlight style demo for the plugin setting Step 4. usage: ... no-highlight, applescript, bash, cpp, css, http, java, javascript, json, markdown, matlab, objectivec, php, python, ruby, sql,...
<p>Details for highlight.js ... Step 1. intall wp-highlight.js WordPress plugin Step 2. optionally, replace wp/wp-content/wp-highlights/ with a custom configured wp-highlight.js Step 3. review highlight style demo for the plugin setting Step 4. usage: <pre><code class=java>...</code></pre> no-highlight, applescript, bash, cpp, css, http, java, javascript, json, markdown, matlab, objectivec, php, python, ruby, sql, xml<p>NIH v praxi – syntax highlighter pro WordPress | DevBlog на "Completely unfair comparison of Javascript syntax highlighters"
2012-03-26T02:02:19.417582-07:00NIH v praxi – syntax highlighter pro WordPress | DevBloghttp://devblog.cz/2012/03/nih-v-praxi-syntax-highlighter-pro-wordpress/https://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-126459Základem bylo zvolit, jakou knihovnou vlastně ve výsledku kód obarvovat. Měl jsem jasno, že to má dělat JavaScript (serverové obarvování má IMO víc nevýhod než výhod a Gisty mají zase nevýhodu, že se nezobrazí v GReaderu), a jako nejméně intruzivní a relativně nejvíc rozšířená mi přišla knihovna Prettify od Googlu...
<p>Základem bylo zvolit, jakou knihovnou vlastně ve výsledku kód obarvovat. Měl jsem jasno, že to má dělat JavaScript (serverové obarvování má IMO víc nevýhod než výhod a Gisty mají zase nevýhodu, že se nezobrazí v GReaderu), a jako nejméně intruzivní a relativně nejvíc rozšířená mi přišla knihovna Prettify od Googlu (mimochodem, krásné porovnání JS knihoven je zde). Používá ji Stack Overflow, na tomto webu plugin pro komentáře a navíc má výhodu, že není potřeba určovat jazyk kódu – Prettify nějak umí obarvit cokoliv, ačkoliv přesně nechápu, jak to vlastně funguje. Kvůli jednoduchosti syntaxe (v podstatě se jen elementu <pre> přidá class="prettyprint") je zásadně jednodušší (a funkční) i plugin pro Live Writer a rovněž přidání do stránky je snadné.<p></pre>Unfair comparison | Seeitdoit на "Completely unfair comparison of Javascript syntax highlighters"
2011-09-23T02:49:59.996164-07:00Unfair comparison | Seeitdoithttp://seeitdoit.shikshik.org/2011/09/23/unfair-comparison/https://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-98107Маниакальный веблог » Completely unfair comparison of …Completely unfair comparison of Javascript syntax highlighters. Маниакальный веблог, 22.05.2011. During the time before latest release of highlight.js 6.0 I …
<p>Маниакальный веблог » Completely unfair comparison of …Completely unfair comparison of Javascript syntax highlighters. Маниакальный веблог, 22.05.2011. During the time before latest release of highlight.js 6.0 I …Using syntax highlight from GitHub - Programmers Goodies на "Completely unfair comparison of Javascript syntax highlighters"
2011-08-15T21:57:43.638399-07:00Using syntax highlight from GitHub - Programmers Goodieshttp://programmersgoodies.com/using-syntax-highlight-from-githubhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-94683Github uses pygments to highlight syntax. Pygments is running on the server, instead of a pure Javascript client solution. If you’re looking for a Javascript solution check out this review of the various options.
<p>Github uses pygments to highlight syntax. Pygments is running on the server, instead of a pure Javascript client solution. If you’re looking for a Javascript solution check out this review of the various options.emwendelin@openid.com на "Completely unfair comparison of Javascript syntax highlighters"
2011-06-12T15:21:48.220480-07:00emwendelin@openid.comhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-87332Considering how much smaller highlight.js is compared to SyntaxHighlighter, it might be worth switching to. Also, +1 to Lea :)
<p>Considering how much smaller highlight.js is compared to SyntaxHighlighter, it might be worth switching to. </p>
<p>Also, +1 to Lea :)leaverou@gmail.com на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-29T15:33:00.641868-07:00leaverou@gmail.comhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-85690Thank you, I've been looking for a syntax highlighter and this looks quite interesting. @ActionJake: You just need 2 color stops at 1.2em (assuming your line-height is 1.2) and background-size to set the size of the gradient to 2.4em. Then it's repeated and matches every line. I've used this technique...
<p>Thank you, I've been looking for a syntax highlighter and this looks quite interesting.</p>
<p>@ActionJake: You just need 2 color stops at 1.2em (assuming your line-height is 1.2) and background-size to set the size of the gradient to 2.4em. Then it's repeated and matches every line.</p>
<p>I've used this technique in my blog: <a href="http://leaverou.me/">http://leaverou.me/</a>ActionJake на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-27T09:57:37.981084-07:00ActionJakehttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-85479Nevermind, code blocks don't wrap and none of these seem to have wrapping as a feature :) So my suggestion could still work.
<p>Nevermind, code blocks don't wrap and none of these seem to have wrapping as a feature :) So my suggestion could still work.ActionJake на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-27T09:54:47.079252-07:00ActionJakehttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-85478An interesting CSS trick for zebra-striping would be to count the number of matches for newline and then create a background gradient with the appropriate color stops. Example below for 5 lines of code. .someCodeBlock { background-image: linear-gradient(top, #000, #000 20%, #fff 20%, #fff 40%, #000 40%, #000 60%, #fff...
<p>An interesting CSS trick for zebra-striping would be to count the number of matches for newline and then create a background gradient with the appropriate color stops. Example below for 5 lines of code.</p>
<p>.someCodeBlock {
background-image: linear-gradient(top, #000, #000 20%, #fff 20%, #fff 40%, #000 40%, #000 60%, #fff 60%, #fff 80%, #000 80%, #000); }</p>
<p>Should be easy enough to build these gradients up programmatically. Might have to do some adjustments for padding, etc.</p>
<p>Oh crap! Wrapping! hm... the plot thickens.Ivan Sagalaev на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-23T14:16:59.470433-07:00Ivan Sagalaevhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-84947David: Okay, I took a look at your source code, and it looks like a few bits of CSS would give you line numbers and alternating row colors: David, your solution won't work because <span>s don't corresponds to lines. I tried to do this some time ago with CSS counters...
<p><em>David</em>:</p>
<blockquote>
<p>Okay, I took a look at your source code, and it looks like a few bits of CSS would give you line numbers and alternating row colors:</p>
</blockquote>
<p>David, your solution won't work because <code><span></code>s don't corresponds to lines. I tried to do this some time ago with CSS counters but it gets harder than it seems pretty quickly.</p>
<p><em>tmont</em>:</p>
<blockquote>
<p>I'd be interested in hearing your opinion on Sunlight: <a href="http://sunlightjs.com/demo.html">http://sunlightjs.com/demo.html</a></p>
</blockquote>
<p>It looks pretty interesting! I'll try to look at it in detail after my vacation. Thanks!</p>
<p><em>mikesamuel@gmail.com</em>:</p>
<blockquote>
<p>Google Code Prettify allows one to specify a language and the language extensions map to file extensions</p>
</blockquote>
<p>Mike, I know, I used it for CSS in the <a href="http://softwaremaniacs.org/media/blog/highlighters/google-code-prettify/test.html">test</a>. It's pretty obvious that no heuristic can be 100% reliable so you have to have some way to explicitly specify the language.</p>
<blockquote>
<p>I think it also support the HTML5 idiom that you use as your definition for HTML 5 compatibility as long as the code element also has the class prettyprint.</p>
</blockquote>
<p>You can look at it that way. But my goal with highlight.js was more practical: I wanted code marked-up according to the spec to be highlighted without additional hassle. And even more practical need was to highlight code in just <code><pre><code>..</code></pre></code> without classes because it's what Markdown does for code fragments.mikesamuel@gmail.com на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-23T10:51:00.804441-07:00mikesamuel@gmail.comhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-84932Google Code Prettify allows one to specify a language and the language extensions map to file extensions. So if you know the filename that you're highlighting, you know which language extension to load and which to apply to a given code block. I think it also support the HTML5 idiom...
<p>Google Code Prettify allows one to specify a language and the language extensions map to file extensions. So if you know the filename that you're highlighting, you know which language extension to load and which to apply to a given code block. I think it also support the HTML5 idiom that you use as your definition for HTML 5 compatibility as long as the code element also has the class prettyprint.tmont на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-23T09:40:39.920461-07:00tmonthttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-84926I'd be interested in hearing your opinion on Sunlight: http://sunlightjs.com/demo.html. disclaimer: I'm the author. And if you think it sucks, I wouldn't mind hearing some bug reports, too :).
<p>I'd be interested in hearing your opinion on Sunlight: <a href="http://sunlightjs.com/demo.html">http://sunlightjs.com/demo.html</a>.</p>
<p>disclaimer: I'm the author.</p>
<p>And if you think it sucks, I wouldn't mind hearing some bug reports, too :).David на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-23T08:25:01.304111-07:00Davidhttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-84920Okay, I took a look at your source code, and it looks like a few bits of CSS would give you line numbers and alternating row colors: code { counter-reset: code-lines; counter-increment: code-lines; } code span { background-color: grey; counter-increment: code-lines; } code span:nth-child(even) { background-color: lightgrey; } code span:nth-child(5n):before...
<p>Okay, I took a look at your source code, and it looks like a few bits of CSS would give you line numbers and alternating row colors:</p>
<pre><code>code {
counter-reset: code-lines;
counter-increment: code-lines;
}
code span {
background-color: grey;
counter-increment: code-lines;
}
code span:nth-child(even) {
background-color: lightgrey;
}
code span:nth-child(5n):before {
content: counter(code-lines) ". ";
}
</code></pre>
<p>This is off the top of my head, but that should produce a different set of line numbers per <code> block with alternating colors and only number every 5th line.</code>mktums на "Completely unfair comparison of Javascript syntax highlighters"
2011-05-22T17:14:28-07:00mktumshttps://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/#comment-84857Поздравляю с новым релизом! =)
<p>Поздравляю с новым релизом! =)