Ask HN: review my tiny app - code to html converter

http://hilite.me

by alexkay • 17 years ago

55 59 17 years ago

hilite.me

zv• 17 years ago

Nice domain name.

How about feature of automatically detect programming language?

alexkay22• 17 years ago

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

maryrosecook• 17 years ago

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

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

alexkay22• 17 years ago

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• 17 years ago

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.

bensummers• 17 years ago

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!

alexkay22• 17 years ago

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• 17 years ago

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.

profquail2• 17 years ago

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.

alexkay22• 17 years ago

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

profquail2• 17 years ago

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.

jeroen• 17 years ago

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.

alexkay22• 17 years ago

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/

Torn• 17 years ago

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/

alexkay22• 17 years ago

Thanks!

Great suggestion, I will see what I can do.

nirmal• 17 years ago

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.

alexkay22• 17 years ago

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• 17 years ago

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

tezza2• 17 years ago

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.

alexkay22• 17 years ago

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

tezza2• 17 years ago

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

alrex021• 17 years ago

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

alexkay22• 17 years ago

Glad you find it useful :)

chaosprophet2• 17 years ago

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.

alexkay22• 17 years ago

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.

chaosprophet2• 17 years ago

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.

wicknicks• 17 years ago

Sweet app! Much needed! Bookmarked your page :)

alexkay22• 17 years ago

Thanks! :)

hyyypr2• 17 years ago

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

hyyypr2• 17 years ago

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

alexkay22• 17 years ago

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

litewulf• 17 years ago

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

nbroyal• 17 years ago

Just a quick note, the exact command is ':TOhtml' (lowercase h). Tripped me up the first time I tried to run the command.

tjr• 17 years ago

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

alexkay22• 17 years ago

I'm using the Pygments library, I will keep it updated so that all new languages are supported by the app.

You can even write your own lexer, it will be greatly appreciated by all Pygments users: http://pygments.org/docs/lexerdevelopment/

frossie• 17 years ago

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• 17 years ago

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

petercooper• 17 years ago

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.

alexkay22• 17 years ago

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.

raju• 17 years ago

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.

alexkay22• 17 years ago

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

trevorturk3• 17 years ago

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

alexkay22• 17 years ago

Good idea, I will probably do it.

trevorturk3• 17 years ago

I did it anyway :) http://pygments.appspot.com/

NathanKP• 17 years ago

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.

oblommer• 17 years ago

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.

alexkay22• 17 years ago

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

davidw• 17 years ago

Ask HN: review my tiny app - code to html converter

Related Stories