Skip to content
/ cssyn Public

small syntax highlighting for websites written only in css (no javascript)

Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



13 Commits

Repository files navigation

cssyn (alpha_ver.0.2)

A syntax highlighter written in CSS without any JavaScript


I don´t want any JS on my website but I want a syntax-highlighter with all the funky colors of the iwtb-colorscheme. So here is the cssyn (or css syntax highlighter).

It doesn´t highlight full automatic. You want syntax-highlighting - you have to do it yourself. Yes it is a bit more work on your website but it is totally worth it ... or not ... your decision.

For a live-demonstration have a look at the NERDBUDE (cssyn in action at NERDBUDE.COM) website.


Just copy the cssyn.css to your /css folder and link it in your html-file with:

<link rel="stylesheet" type="text/css" href="/cssyn.css"> 

or copy the CSS Code in your existing style.css file.


The highlighting itself is defined in classes:

  • .unixshell (if you want to show a terminal command)
  • .comment
  • .url
  • .header-file
  • .selector
  • .subselector
  • .value
  • .unit

how to use it

Before you highlight the code you can set a small label for the codebox. Just use <span class="label">C++</span> and the language you choose will appear in a small flag on the top of the box.

You can use the syntax-highlighting within the <div id="cssyn"> </div> tag. This contain the code block.

You define the lines included in numbering with te following ln-tag. Every line between these text within the cssyn div container get a line number. <ln> </ln>

Now you can hightlight the code with a <span> tag and an class name: <span class="selector"> int </span>


<span class="label"> C++ </span>
<div id="cssyn">
	<ln><span class="comment"> /* HELLO WORLD */ </span></ln>

want to do

  • add more colorschemes
  • add more classes for highlighting
  • add single language classes


small syntax highlighting for websites written only in css (no javascript)







No releases published