Dan_Patterson

Code Syntax Highlighting... the price is high

Blog Post created by Dan_Patterson Champion on Nov 4, 2017
The background story of syntax highlighting

and other tales from behind the scenes...

: ---- before table ---- :

A small snippet of code

---- before code ----

# comment line place using html...
import sys
import numpy as np
#
a = [1, 2, 3, 4]
print(("{} "*len(a)).format(*a))

---- what it really looks like ----

..... Now I had to break up the lines into bits in order for people to read it... so bear with me.

.....  Do remember, someone wrote these rules and the syntax stuff, so don't blame the

...... messenger


<pre class="language-python line-numbers">

<code>

<span class="token comment"># comment line place using html...</span><br />

<span class="token keyword">import</span>

 sys<br />

<span class="token keyword">import</span>

 numpy

<span class="token keyword">as</span>

 np<br />

<span class="token comment">#</span><br />

a

<span class="token operator">=</span>

<span class="token punctuation">[</span>

<span class="token number">1</span>

<span class="token punctuation">,</span>

<span class="token number">2</span>

<span class="token punctuation">,</span>

<span class="token number">3</span>

<span class="token punctuation">,</span>

<span class="token number">4</span>

<span class="token punctuation">]</span><br />

<span class="token keyword">print</span>

<span class="token punctuation">(</span>

<span class="token punctuation">(</span>

<span class="token string">"{} "</span>

<span class="token operator">*</span>

len

<span class="token punctuation">(</span>

a

<span class="token punctuation">)</span>

<span class="token punctuation">)</span>

<span class="token punctuation">.</span>

format

<span class="token punctuation">(</span>

<span class="token operator">*</span>

a

<span class="token punctuation">)</span>

<span class="token punctuation">)</span>

&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;

&zwj;&zwj;&zwj;&zwj;

<span class="line-numbers-rows">

<span>&zwj;</span>

<span>&zwj;</span>

<span>&zwj;</span>

<span>&zwj;</span>

<span>&zwj;</span>

<span>&zwj;</span>

</span>

</code>

</pre>

 

OooooK  so a lot of stuff that makes editing them nearly impossible.  It must be hard to identify punctuation, i guess... hence all the bloat (paid by the letter?)

 

Now this is plain text formatting..... no fancy colors... not too bad

import numpy as np
#
a = [1, 2, 3, 4]
print(("{} "*len(a)).format(*a))

 

Here is what it looks like as plain text....

<pre class="language-none line-numbers">

<code>import numpy as np<br />

#<br />

a = [1, 2, 3, 4]<br />

print(("{} "*len(a)).format(*a))

<span class="line-numbers-rows"><span>&zwj;</span><span>&zwj;</span><span>&zwj;</span><span>&zwj;</span></span></code></pre>

 

You can almost read it ... much better... there will be less need for **ml programmers... a small sacrifice, but I am sure they can be redeployed.  

Sadly, though there is still all that line number stuff... so I am going to try a direct copy into the html section ( see the <> button up top) so see if I can dump it and reduce the bloat

 

import numpy as np
#
a = [1, 2, 3, 4]
print(("{} "*len(a)).format(*a))

 

So the price you pay for syntax highlighting and line numbering is buried in the code.  So, if you don't start syntax highlighting first then paste your code when you are there... it is way easier just to start again or not post your code snippet for perusal at all.

All done...

Outcomes