

Ask HN: review my tiny app - code to html converter - alexkay
http://hilite.me

======
Torn
Nice work.

Quick suggestion though (for ease of copy-pasting by end-users):

From the _resulting_ rendered html with line numbers, the line numbers are
also copied into the clipboard, which is undesirable. Suggest you put them in
separate elements like dpaste does it, for easy selection without line
numbers: <http://dpaste.com/hold/93427/>

~~~
alexkay
Thanks!

Great suggestion, I will see what I can do.

------
hyyypr
Useful app. But just an fyi, vim has a ':TOHtml' feature that generates an
html files from your code (including color scheme).

~~~
alexkay
I'm afraid I'm an Emacs guy :-p

~~~
litewulf
Luckily, emacs has a set of htmlize-* functions as well.

------
bensummers
Nice! Just need a default "colour on black" version without fiddling with the
CSS.

I wish this had been around when I was doing my last blog post; would have
saved a lot of messing around with TextMate's HTML generation.

Bookmarked!

~~~
alexkay
I'm using this CSS for my own "colour on black" blog:

    
    
      color:white;background:black;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;
    

You basically just swap the color and the background styles. Also, for best
results select the "fruity" color style.

By the way, the CSS and the style are remembered in the cookies, no need to
re-type them on each visit.

~~~
felideon
With the _fruity_ style, keywords seem to render white (on a white background)
so they go invisible.

Is this intentional for black backgrounds as you mentioned? If so, changing to
fruity should change the default CSS.

~~~
alexkay
Yes, the "fruity" style (and to some extent "native") is for dark backgrounds.

Changing the default CSS if they are selected is a good idea, thanks!

------
oblommer
Looks good! I would suggest to auto-highlight everything in the HTML box when
you click inside it. That would save the user an extra click.

~~~
alexkay
See my other comment on javascript. That's something I still want to play
with.

------
trevorturk
I was thinking of making something similar, but just with an API that you
could POST to. Perhaps you could consider adding an API?

~~~
alexkay
Good idea, I will probably do it.

~~~
trevorturk
I did it anyway :) <http://pygments.appspot.com/>

~~~
alexkay
Me too :) <http://www.hilite.me/api>

~~~
trevorturk
Awesome!

------
bootload
_"... Ask HN: review my tiny app ..."_

works well for me. I'd like to see JSON as a data format or better still an
API to let you define your own code to convert.

~~~
alexkay
Thanks! I will work on the API.

------
profquail
Cool little app. One little improvement I thought of though, is to move the
inline styles into the header, even if you're just using class names like
"code1", "code2", etc.

It would just make it a bit easier to read the source code or change the code
colors if you ever needed to. It should also give you a small decrease in the
actual code size, which could matter if you were posting a lot of code on a
heavily-visited site.

~~~
alexkay
The reason I wrote this tool is because some blog hosting providers don't
allow to inject custom CSS or javascript into the <header>

There are already quite a few solutions for those who can modify the header,
the most famous is <http://alexgorbatchev.com/wiki/SyntaxHighlighter>

~~~
profquail
I think you can register CSS classes via JavaScript...so if they couldn't put
a style block in the header, they could put a script block in the body.

------
maryrosecook
I use gist.github.com for this. Advantages:

* Always editable in a clean text-area. * Version controlled. * Language detection and syntax highlighting.

~~~
alexkay
GitHub's gists can indeed be embedded to blog posts, but only using an
external js script. This won't work with blog hosting providers that don't
allow JavaScript (for example wordpress.com).

Also, this method won't work too well when the post is viewed in an rss
reader.

~~~
sant0sk1
Agreed.

I have waffled back & forth on embedding gists in my blog posts because they
don't show up in RSS readers. Also, if you have a long blog post with multiple
snippets of code you have to create a new gist for each one. It'd be nice if
each 'file' in a gist could be embedded separately.

------
petercooper
Pretty good idea. I have something specially rigged for Ruby use (I basically
use this for Ruby Inside):
<http://www.rubyinside.com/advent2006/7-coloring.html>

In future, though, I'll probably move to a JavaScript solution as this hard
coding just doesn't feel right anymore.

~~~
alexkay
Thanks Peter. As I mentioned earlier, javascript solutions work great but have
two major limitations: not all hosting providers allow embeddable js; and
javascripted highlighting doesn't work too well in rss readers.

------
weaksauce
It might be useful to add a button that copies the resultant code to your
clipboard. I don't know how cross browser that is but it could be nice. I
don't think that it should be the default action when you generate though
because people will not know that it is happening and they might not want the
clipboard data to get overwritten.

~~~
alexkay
AFAIK, copying to the clipboard requires embedding an swf file. I might do
this, thanks for the suggestion!

------
chaosprophet
Though this is a pretty nice and useful piece of code, I will stick to using
SyntaxHighlighter for my blog, because it offers me the ability to include a
plaintext view function and a print function. The plaintext view removes the
linenumbers and all other info apart from the actual code.

~~~
alexkay
SyntaxHighlighter is great, no doubt here. It has its pros which you listed,
and a couple of cons:

* It requires to link to a js script which is not always possible.

* It doesn't work in many rss readers.

~~~
chaosprophet
Hmmmm... I never knew it din't work in RSS readers. But I guess that's not too
much of a dealbreaker right now. Perhaps if my feed subscribers increase, I'll
switch.

------
tezza
I refer to this process as _Pretty Printing_ ...

if you can, could you please use this term in keywords somewhere for older
coders like me. Then we can find it via searching on those terms

Excellent app.

~~~
alexkay
Thanks, I definitely will! Any other keyword suggestions by the way?

~~~
tezza
I guess you should look at an established provider of one-function tools like

<http://www.network-science.de/ascii/>

if you find yourself popular and wanting to monetize

------
davidw
See also: Emacs' htmlize.

<http://dedasys.com/Interp.java.html>

the results of running htmlize-buffer on Hecl's Interp.java.

------
raju
Very nice app. Bookmarked. Quick suggestion, and it may not be something used
by all users, but I attempted to type code in, and naturally hit a tab after
the first line to indent the class declaration (I was trying out some Ruby
code). Naturally the tab takes me elsewhere.

Maybe capture a Ctrl-Tab (or similar key-stroke) and insert a tab? [I am not
sure how useful this would be for most users copy pasting code in, but it does
make it easy to type in code]

Again, nice app. Thanks, and good work.

~~~
alexkay
I guess most people will just copy/paste their snippets. Changing standard key
shortcuts just doesn't feel right to me. Thanks anyway!

------
nirmal
You should register an onChange handler for all of the form elements and
update the preview automatically. Specifically, for the drop down box used to
pick color themes.

~~~
alexkay
At first I wanted to update the preview on-the-fly as the input changes, but
then I decided to go javascript-free so that the page loads and feels faster.
I will probably try it later anyway.

~~~
joshfinnie
I would have to agree. I was surprised at the overall speed of this website.
keep up the good work!

~~~
alexkay
Google App Engine is really fast, especially if you don't abuse its datastore
:)

~~~
zepolen
The site felt very slow for me.

------
wicknicks
Sweet app! Much needed! Bookmarked your page :)

~~~
alexkay
Thanks! :)

------
hyyypr
Useful app. But just an fyi, vim has a ':TOHtml' feature that generates an
html files from your code (including color scheme).

------
alrex021
Just what I needed for my new clojure post on my blog. (My current syntax
highlighter doesn't support clojure.)

~~~
alexkay
Glad you find it useful :)

------
jeroen
Too many options. If I select [c#] it would be nice to have [vs] chosen by
default. And [perldoc] doesn't need to be in that list.

Also, it looks like you're looking for keywords. That doesn't work for class
names. Pattern recognition will probably do a lot better.

~~~
alexkay
Next time you return to the site it will remember your language and style
selection.

As for highlighting, I'm using the Pygments library: <http://pygments.org/>

------
NathanKP
I like it!

The first time I tried a PHP snippet I didn't copy the <?php ?> tags and it
didn't highlight anything. However, I quickly figured it out.

You might want to add a message or notice about the <?php ?> requirement.

------
zv
Nice domain name.

How about feature of automatically detect programming language?

~~~
alexkay
Pygments can do this, it will be easy to integrate. Thanks for the suggestion!

------
acangiano
For those of you using TextMate, consider my Pygments bundle:
<http://github.com/acangiano/pygments-textmate-bundle>

------
tjr
Very good! Any means of accepting more languages to work with?

~~~
frossie
Okay now I am curious which langauge you wanted that wasn't there... there's
like a 100 languages on that list, half of which I haven't even heard of
("Brainfuck"???)

~~~
MaysonL
How about these, from personal experience: Newspeak, Oberon, Modula, Pascal,
Cobol, PL/I, Ada, and assembly. And how could I forget Basic? ;-<)

------
iag
neat

