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

nerdbude/cssyn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

cssyn (alpha_ver.0.2)

A syntax highlighter written in CSS without any JavaScript

cpp_hello_world

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.

Installation

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.

classes

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>

example:

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

want to do

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published