search

mukhortov / HESH-WordPress-Plugin

WordPress plugin that adds syntax highlighting to the Post/Page HTML editor
61 stars 16 forks source link

readme

<W/>

HTML Editor Syntax Highlighter

Add syntax highlighting in the Classic Post & Page HTML text editor, Gutenberg Code Editor, and Theme & Plugin editors using Codemirror.js

Status: Unmaintained

I don't use wordpress anymore and don't have the time to maintain this code. It still appears to work with the most recent version of wordpress (v6.1). I you would like to contribute, send me a message.

v3 WPcode

There was a v3 in the works that uses the Monaco code editor rather than CodeMirror. Its on github as WPcode, but I don't have time for that either.

Features

If you are not a developer, please use the HTML Editor Syntax Highlighter plugin page on WordPress.org to download and install it. You can also download the latest release from here.

Please Provide Your Feedback

If you're a regular user of this plugin, please consider taking a short User Experience Survey to provide feedback that will help shape the new version 3.0.

Contributing

Please report any issues or suggestions.

Building

  1. Clone the repo.
  2. Install node.js if you haven't already.
  3. Install the gulp CLI globally if you haven't already with npm install -g gulp-cli.
  4. Run npm install on the project folder.
  5. Run gulp build to build the project.

Running gulp will build the project and run it in a watch state. Making any changes to files will automatically rebuild the project. Install the LiveReload chrome browser extension and the page will reload when the project rebuilds.

Release Process

Don't manually edit the release branch. Only merge master into the release branch to update it

Sample Text for testing

Paste this code in the editor to test out all the different syntax highlighting features.

<div>
    [shortcode attribute="value" standAloneAttribute bool=true int=42 ]
        [oneliner noquotes=stringvaluewithnospaces]
        [self-closing-syntax html='<label class="name">Label</label>' /]
        shortcode content 
        <a href="#">nested html</a>
        [[escapedshortcode]]
        [ [brackets that-dont-count]]
    [/shortcode]
</div>

    a really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long line that should wrap and indent properly

<!--more WordPress More Tag Text --><!--noteaser--><!--nextpage-->
<!--HTML comment--><!--[shortcode]-->

<div style=" width:200px; height:400px; ">styled div</div>
<style>
    /* css comment */
    #identifier, .class{
        width:200px;
        height:400px;
    }
    /* square brackets in css block */
    element[attribute="value"]{ color:red; }
</style>

<input onclick=" document.getElementById('identifier').style.width = '200px'; "/>
<script>
    // javascript comment
    var obj = {
        key: value,
        keytwo: valuetwo,
        array: ['valueone', 'valuetwo'] // square brackets in javascript block
    };
    document.getElementById('identifier').style.width = '200px';
    var string = '</script' + '>'; // writing this straight out will break the mix
</script>

ERRORS!
[/matchlessEndTag]<div class="right after error"></div>
[shortcode no_square_brackets='aa[<div here="whatever" adn=" ></div>]aaa']
[no/special|characters\in*shortcode^names or.attribute`names=error /]

&amp; &#xaA1; &#9; &error
<?php 
    // this is meta highlighting
    [shortcode] 
    <div class="something"></div>
    $var = 'value'; 
?>

For promotional text:

<h1>HTML Editor Syntax Highlighter</h1>

<p class="description">
    Add syntax highlighting to the Classic Text Editor, Gutenberg Code Editor, and Theme &amp; Plugin Editors. It also highlights [[shortcodes]] like HTML!
    [shortcode attribute="value" standAloneAttribute bool=true int=42 /]
</p>

<div>
    [shortcode ]
        [oneliner html='<label class="name">Label</label>']
        shortcode content 
        <a href="#">nested html</a>
        [[escapedshortcode]]
    [/shortcode]
</div>

<!--more WordPress More Tag Text --><!--noteaser--><!--nextpage-->
<!-- HTML comment --><!-- commented out [shortcode] -->

<p>It works with inline CSS!</p>
<style> /* css comment */
    #identifier, .class, element[attribute="value"] {
        width:  200px;
        color:  rebeccapurple;
    }
</style>

<p>It works with inline JavaScript Too!</p>
<script> // javascript comment
    var obj = {
        key: value,
        number: 200,
        array: ['valueone', 'valuetwo'] 
    };
    document.getElementById('identifier').style.width = obj.number + 'px';
</script>