Code Snippet Design?

[Jerba]

I saw a similar thing on dribbble earlier and though it would be pretty cool to use as a code-snippet on a website. Anyway, I quickly threw some html and css together and got this: (It’s supposed to resemble/have a look and feel of a command line)

Just wanting a little critique I guess.

If I were to utilize this in my website, I was thinking about adding emphasis to selectors etc similar to how a text editor would (syntax highlighting). Do you think it’s necessary?

EDIT: like this:

[nixnerd]

Looks great to me. Nice and clean. I’d say it resembles barebones Vim or Sublime more than a terminal. Basically the only difference is you don’t have your [user@host ~]$ and a little blinking cursor. But, it still looks real nice.

I think you SHOULD add syntax coloration. There’s already a slew of great tools for that. CSS-Tricks uses the best one in my opinion.

[nixnerd]

Here you go.

[Alen]

Some inspiration http://daylerees.github.io

[nixnerd]

@alenabdula Those are hot dude. Makes me want to change up my configs right now.

[Robby]

Just wanted to chime in on the syntax highlighting. I like https://highlightjs.org/ its great. Never played with prism, just some other sever side highlighters which i wouldn’t recommend.

[nigelc]

Some inspiration http://daylerees.github.io

Curiously I find Mud the clearest.

[Author]

Posts