Setup
            
              <link rel='stylesheet' href='css/PSH.css' type='text/css'>

              /* Here is Non-implemented feature. Comes soon ! */

              <script src="PSH.js"></script>
              <script>PSH.init();</script>
            
          
Including PSH.css will give you color codes to highlight everything written in HTML or CSS
So, you just need to create a pre block with a code block inside, like the example below :
          
<pre class="PSH">
  <code>
    Here you are !
  </code>
</pre>
          
        
Which will simply gives you this :
          
Here you are !
          
        
Yes, without highlighting. Just an happy single code block. That's all !
Curently, there's only two languages supported : HTML and CSS. Check them out !
HTML
            

              <!DOCTYPE html>
              <title>Title</title>

              <style>body {margin: 0; width: 100%;}</style>

              <script type="application/javascript">
                function $init() {return true;}
              </script>

              <body>
                <p checked class="title" id='title'>Title</p>
                <!-- add stuff here -->
              </body>

            
          

HTML Highlighting 101

brackets : use the "PSH bracket" class with the < and >
          <span class="PSH bracket"><</span>plop<span class="PSH bracket">></span>
        
meta : use the "PSH meta" class
          <span class="PSH meta">!DOCTYPE html</span>
        
tag : use the "PSH tag" class
          <span class="PSH tag">div</span>
        
class: use the "PSH class" class
          <span class="PSH class">class</span>
        
link: use the "PSH link" class
          <span class="PSH link">"/link/to/something.png"</span>
        
string: use the "PSH string" class
          <span class="PSH string">"Potato"</span>
        
id: use the "PSH id" class
          <span class="PSH id">id</span>
        
selector: use the "PSH selector" class
          <span class="PSH selector">~</span>
        
attribute: use the "PSH attribute" class
          <span class="PSH attribute">:hover</span>
        
attribute id: use the "PSH attribute id" class
          <span class="PSH attribute id">#id</span>
        
comment: use the "PSH comment" class
          <span class="PSH comment"><!-- yay --></span>
        
CSS
            
              @font-face {
                font-family: Quicksand; src: url('Quicksand.otf');
              }

              body, .text {
                color: rgba(0,0,0,0.8); background: #eee;
                font-family: Quicksand, sans;
              }

              @import url(main.css);
              @media print {
                img[src$=".png"]::after {
                  content: attr(src url, '.jpg')
                }
              }
            
          
brackets: use the "PSH CSS bracket" class
          <span class="PSH CSS bracket">{</span>
            plop
  <span class="PSH bracket">}</span>
        
comment: use the "PSH comment" class
          <span class="PSH comment">/* yay */</span>
        
unit: use the "PSH CSS unit" class
          <span class="PSH CSS unit">px</span>
        
string: use the "PSH CSS string" class
          <span class="PSH CSS string">"plop"</span>
        
constant: use the "PSH CSS constant" class
          <span class="PSH CSS constant">flex</span>
        
numeric constant: use the "PSH CSS constant numeric" class
          <span class="PSH CSS constant numeric">42</span>
        
color constant: use the "PSH CSS constant color" class
          <span class="PSH CSS constant color">#424242</span>
        
property: use the "PSH CSS property" class
          <span class="PSH CSS property">display</span>
        
keyword: use the "PSH CSS keyword" class
          <span class="PSH CSS keyword">@media</span>
        
function: use the "PSH CSS function" class
          <span class="PSH CSS function">rgba()</span>
        
Copyright (c) 2017 Phoenix. All Rights Reserved.