CSSYN

A simple syntax highlighter based on HTML and CSS without JavaScript
Log | Files | Refs | README

cssyn.css (1701B)


      1 /*
      2 8"""8 8"""" 8"""8  8""""8 8""""8   8   8 8""""8 8""""
      3 8   8 8     8   8  8    8 8    8   8   8 8    8 8
      4 8e  8 8eeee 8eee8e 8e   8 8eeee8ee 8e  8 8e   8 8eeee
      5 88  8 88    88   8 88   8 88     8 88  8 88   8 88
      6 88  8 88    88   8 88   8 88     8 88  8 88   8 88
      7 88  8 88eee 88   8 88eee8 88eeeee8 88ee8 88eee8 88eee
      8 
      9 [website] https://www.nerdbude.com
     10 [mail] post@nerdbude.com
     11 [mastodon] https://corteximplant.com/@0x17
     12 [git] https://git.nerdbude.com
     13 */
     14 
     15 /*just for demo / example.html*/
     16 #body {background-color: #292929;
     17        color: #ffffff;}
     18 
     19 
     20 
     21 /* code block main style */
     22 
     23 #cssyn {
     24 	background: transparent;
     25 	padding: 15px 0 15px 0; 
     26 	margin: 0 0 2px 0;
     27 	border-style: solid;
     28 	border-color: #afd75f;
     29 	border-width: 1px;
     30 	counter-reset: line;
     31 	}
     32 
     33 pre    {font-family: 'Share Tech Mono', monospace;
     34 	padding-left: 15px;}
     35 
     36 ln     {font-family: 'Share Tech Mono', monospace;}
     37 
     38 ln::before    {content: counter(line, decimal-leading-zero);
     39 		 background: #282828;
     40 		 color: #444444;
     41 		 padding: 0 10px 0 0;
     42 		 margin: 0 20px 0 0;
     43 		 border-right: 1px solid #444444;
     44 		 counter-increment: line;
     45 		 -webkit-user-select: none;
     46 	 	}	
     47 
     48 .label {background-color: #afd75f;
     49 	border-style: solid;
     50 	border-width: 1px;
     51 	border-color: #afd75f;
     52 	padding-left: 15px;
     53 	padding-right: 15px;
     54 	color: #272727;}
     55 
     56 /* single syntax elements as classes */
     57 /* use in html: <pre class="unix-shell"> $> sudo apt-get install </pre> */
     58 
     59 .unixshell	{color: #87afd7; font-style: italic;}
     60 .comment 	{color: #8a8a8a;}
     61 .url		{color: #00ffd7; font-style: italic; text-decoration: underline;}
     62 .value		{color: #875fff;}
     63 .header-file	{color: #afd75f;}
     64 .selector	{color: #ff5f5f;}
     65 .subselector	{color: #ffff5f;}
     66 .unit		{color: #ff5f87;}
     67