Feature Request - Compatibility for CodeColorer

[ajtruckle]

I used to use the CodeColor plugin for syntax highlighting. Here is an example post on my website using this plugin.

The syntax is similar to yours:

[cc lang="xml" first_line="1251" highlight="9-11,20-22,26-30" width="100%"]<!--This is used to insert the Treasures 1, Student or Special Event-->
<xsl:template match="Name | Event | Student" mode="FirstRow">
<xsl:param name="strClass"></xsl:param></xsl:template>

<xsl:if test="self::Event">
<xsl:attribute name="rowspan">3</xsl:attribute>
</xsl:if>
<xsl:value-of select=".">
<xsl:if test="self::Student">
<xsl:apply-templates select="../Assistant">
</xsl:apply-templates></xsl:if>

<!--This is used to insert the Treasures 2, Bible Reader or Student-->
<xsl:template match="Name | Reader | Student" mode="OtherRow">
<xsl:param name="strClass"></xsl:param></xsl:template>

<xsl:value-of select=".">
<xsl:if test="self::Student">
<xsl:apply-templates select="../Assistant">
</xsl:apply-templates></xsl:if>

<!--This is used to insert the Assistant-->
<xsl:template match="Assistant">

<xsl:value-of select=".">
</xsl:value-of></xsl:template>
[/cc]

The plugin is problematic in the sense that you must make sure you are in the Gutenberg "Code Editor" mode before opening the post to edit it. Otherwise must content is lost.

So is it possible to add "CodeColorer" to your compatibility list so that I can deactivate and unload the plugin?

[AndiDittrich]

it should be technically possible. does it only work with the [cc] shortcode ?

[ajtruckle]

it should be technically possible. does it only work with the [cc] shortcode ?

No, there are several more. Fundamentally for me the other is [cci]. But they are listed here.

[AndiDittrich]

now i unerstand how it's working... there is only the [cc shortcode and it can include additional params or the language - that makes it very easy to add a compatibility filter

[ajtruckle]

Great! I won't spend time manually adjusting these posts on my website. :)

[ajtruckle]

Thanks so much for everything you have done so far Andi! Stay safe in the COVID-19 Pandemic!

Is this CodeColorer still possible at some point? And when it is, I can then delete the plugin from my library?

[AndiDittrich]

maybe next week-

the compatibility mode will work like the crayon one - you can remove the old plugin and Enlighter will handle the old shortcodes

[ajtruckle]

Fantastic! Thanks.

[AndiDittrich]

has been added to the master branch, please try it - your feedback is welcome!

[ajtruckle]

Thanks. I some to be having some problems.

For example, here is the output when the original plugin is active:

When I deactivate the plugin and activate the compatibility setting in your beta I then get:

This is the link to my original post which has several blocks in it. I can send you my staging link privately if you like (which has the beta active).

[AndiDittrich]

please post your plugin settings -> Enlighter -> About -> Debug (just remove your paths)

[ajtruckle]

Plugin configuration:

{
    "translation-enabled": true,
    "enlighterjs-init": "inline",
    "enlighterjs-assets-js": true,
    "enlighterjs-assets-themes": true,
    "enlighterjs-assets-themes-external": false,
    "enlighterjs-selector-block": "pre.EnlighterJSRAW",
    "enlighterjs-selector-inline": "code.EnlighterJSRAW",
    "enlighterjs-indent": 4,
    "enlighterjs-ampersandcleanup": true,
    "enlighterjs-linehover": true,
    "enlighterjs-rawcodedbclick": false,
    "enlighterjs-textoverflow": "scroll",
    "enlighterjs-linenumbers": true,
    "enlighterjs-theme": "atomic",
    "enlighterjs-retaincss": false,
    "enlighterjs-language": "generic",
    "toolbar-visibility": "default",
    "toolbar-button-raw": false,
    "toolbar-button-copy": true,
    "toolbar-button-window": true,
    "toolbar-button-enlighterjs": false,
    "tinymce-backend": true,
    "tinymce-frontend": true,
    "tinymce-formats": true,
    "tinymce-autowidth": false,
    "tinymce-tabindentation": false,
    "tinymce-keyboardshortcuts": false,
    "tinymce-font": "sourcecodepro",
    "tinymce-fontsize": "0.7em",
    "tinymce-lineheight": "1.4em",
    "tinymce-color": "#000000",
    "tinymce-bgcolor": "#f9f9f9",
    "gutenberg-backend": true,
    "quicktag-backend": false,
    "quicktag-frontend": false,
    "quicktag-mode": "html",
    "shortcode-mode": "disabled",
    "shortcode-inline": true,
    "shortcode-type-generic": true,
    "shortcode-type-language": true,
    "shortcode-type-group": false,
    "shortcode-filter-content": true,
    "shortcode-filter-excerpt": true,
    "shortcode-filter-widget": false,
    "shortcode-filter-comment": false,
    "shortcode-filter-commentexcerpt": false,
    "gfm-enabled": false,
    "gfm-inline": true,
    "gfm-language": "raw",
    "gfm-filter-content": true,
    "gfm-filter-excerpt": true,
    "gfm-filter-widget": false,
    "gfm-filter-comment": false,
    "gfm-filter-commentexcerpt": false,
    "compat-enabled": false,
    "compat-crayon": false,
    "compat-codecolorer": true,
    "compat-type1": false,
    "compat-type2": false,
    "compat-filter-content": true,
    "compat-filter-excerpt": true,
    "compat-filter-widget": false,
    "compat-filter-comment": false,
    "compat-filter-commentexcerpt": false,
    "cache-custom": false,
    "cache-path": "",
    "cache-url": "",
    "dynamic-resource-invocation": false,
    "ext-infinite-scroll": false,
    "ext-ajaxcomplete": false,
    "bbpress-shortcode": true,
    "bbpress-markdown": true
}

Theme configuration:

/*@BASETHEME:atomic*/

.enlighter-t-wpcustom{
    font-family: Inconsolata,Consolas,"Source Code Pro","Liberation Mono","Courier New",Courier,monospace;
    background-color: #272b33;
    font-size: 10pt;
    color: #939393;
}
.enlighter-t-wpcustom .enlighter-toolbar{
    top: 10px;
    right: 10px;
}
.enlighter-t-wpcustom .enlighter-btn{
    font-family: "Open Sans",Arial,Verdana,sans-serif;
    background-image: none;
    background-color: #13151a;
    color: #939393;
    font-size: 10pt;
    padding: 2px 8px 2px 8px;
    margin: 0 5px 0 5px;
    border: solid 1px #383e49;
    border-radius: 4px;
}
.enlighter-t-wpcustom .enlighter-btn:hover{
    background-color: #121518;
    color: #f0f0f0;
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-raw{
    background-image: none;
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-raw:after{
    content: 'Raw';
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-copy{
    background-image: none;
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-copy:after{
    content: 'Copy';
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-window{
    background-image: none;
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-window:after{
    content: 'Extern';
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-website{
    background-image: none;
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-website:after{
    content: 'EnlighterJS';
}
.enlighter-t-wpcustom .enlighter-raw{
    font-size: 17px;
    color: #cfd5e0;
    background-color: #272b33;
    line-height: 22px;
    padding: 4px 5px 4px 54px;
}
.enlighter-t-wpcustom div.enlighter>div{
    padding: 1px 5px 1px 14px;
    line-height: 19px;
    color: #596174;
    background-color: #272b33;
}
.enlighter-t-wpcustom div.enlighter>div:FIRST-CHILD{
    padding-top: 5px;
}
.enlighter-t-wpcustom div.enlighter>div:LAST-CHILD{
    padding-bottom: 5px;
}
.enlighter-t-wpcustom div.enlighter>div:AFTER{
    content: ' ';
}
.enlighter-t-wpcustom div.enlighter>div.enlighter-special{
    background-color: #392d3b;
}
.enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div::before{
    padding: 1px 5px 1px 14px;
    font-size: 10pt;
}
.enlighter-t-wpcustom.enlighter-hover div.enlighter>div:hover{
    background-color: #2e353e;
}
.enlighter-t-wpcustom .enlighter span{
    font-size: 17px;
}
.enlighter-t-wpcustom .enlighter-text{
    color: #cfd5e0;
}
.enlighter-t-wpcustom .enlighter-c0{
    color: #6b7c8b;
}
.enlighter-t-wpcustom .enlighter-c1{
    color: #6b7c8b;
}
.enlighter-t-wpcustom .enlighter-c2{
    color: #6b7c8b;
}
.enlighter-t-wpcustom .enlighter-c9{
    color: #5b7c9c;
}
.enlighter-t-wpcustom .enlighter-k0{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-k1{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-k2{
    color: #d19252;
    border-bottom: dotted 1px #d19252;
}
.enlighter-t-wpcustom .enlighter-k3{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-k4{
    color: #4284ae;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-k5{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-k6{
    color: #d171dd;
    font-style: italic;
}
.enlighter-t-wpcustom .enlighter-k7{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-k8{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-k9{
    color: #fff;
}
.enlighter-t-wpcustom .enlighter-k10{
    color: #4284ae;
    font-style: italic;
}
.enlighter-t-wpcustom .enlighter-e0{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-e1{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-e2{
    color: #d19252;
}
.enlighter-t-wpcustom .enlighter-e3{
    color: #ae42a0;
}
.enlighter-t-wpcustom .enlighter-e4{
    color: #d2901d;
    font-style: italic;
}
.enlighter-t-wpcustom .enlighter-s0{
    color: #7cc379;
}
.enlighter-t-wpcustom .enlighter-s1{
    color: #7cc379;
}
.enlighter-t-wpcustom .enlighter-s2{
    color: #7cc379;
}
.enlighter-t-wpcustom .enlighter-s3{
    color: #7cc379;
}
.enlighter-t-wpcustom .enlighter-s4{
    color: #7cc379;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-s5{
    color: #5e860f;
    font-style: italic;
}
.enlighter-t-wpcustom .enlighter-n0{
    color: #d19a66;
}
.enlighter-t-wpcustom .enlighter-n1{
    color: #d19a66;
}
.enlighter-t-wpcustom .enlighter-n2{
    color: #d19a66;
}
.enlighter-t-wpcustom .enlighter-n3{
    color: #d19a66;
}
.enlighter-t-wpcustom .enlighter-n4{
    color: #d19a66;
}
.enlighter-t-wpcustom .enlighter-n5{
    color: #d19a66;
}
.enlighter-t-wpcustom .enlighter-m0{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-m1{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-m2{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-m3{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-g0{
    color: #6b7c8b;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-g1{
    color: #6b7c8b;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-t0{
    color: #6b7c8b;
}
.enlighter-t-wpcustom .enlighter-t1{
    color: #9b0d5c;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-t2{
    color: #990073;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-t3{
    color: #d171dd;
}
.enlighter-t-wpcustom .enlighter-t4{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-t5{
    color: #4284ae;
}
.enlighter-t-wpcustom .enlighter-t6{
    color: #9b0d5c;
}
.enlighter-t-wpcustom .enlighter-t7{
    color: #6b7c8b;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-t8{
    color: #6b7c8b;
}
.enlighter-t-wpcustom .enlighter-x1{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-x2{
    color: #d19252;
    border-bottom: dotted 1px #d19252;
}
.enlighter-t-wpcustom .enlighter-x10{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-x11{
    color: #d171dd;
    font-weight: 700;
}
.enlighter-t-wpcustom .enlighter-x12{
    color: #d171dd;
    text-decoration: underline;
}
.enlighter-t-wpcustom .enlighter-x13{
    color: #d19252;
    border-bottom: dotted 1px #d19252;
}
.enlighter-t-wpcustom .enlighter-x14{
    color: #d19a66;
    font-style: italic;
}
.enlighter-t-wpcustom .enlighter-x15{
    color: #9b0d5c;
    font-style: italic;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-wrapper{
    position: relative;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch{
    padding: 5px 5px 0 45px;
    background-color: #121518;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn{
    padding: 2px 8px 0 8px;
    border: none;
    background-color: transparent;
    line-height: 25px;
    font-weight: 700;
    color: #f0f0f0;
    border-radius: 5px 5px 0 0;
    text-transform: lowercase;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active{
    background-color: #272b33;
}
.enlighter-t-wpcustom .enlighter-special:hover{
}

I don't see any paths there?

[AndiDittrich]

you've forgot to enable the compatibility mode...

[ajtruckle]

Ah!

Looks Ok to me! Well done!

Only possible gotcha is CSS styling because that looks like:

I realise it is not an issue because I had this:

[cc lang="xml" width="100%" first_line="79"]
.highlight {
background-color: #FFFF00;
font-weight: bold;
}

@media print
{
.highlight{
display:none;
}
}
[/cc]

It should have been CSS and not XML. Thanks better.

[AndiDittrich]

in case everything is working as expected i'll close the issue

[ajtruckle]

The only problem I have (not your fault) is that when I tried to edit the original to fix the XML - CSS it had that enscapement problem. Then I went to raw mode and lost all the tabing in the code for the page. Can't get it back. But I don't think it is your code.

I am going to try on my live site.

[ajtruckle]

It is working good:

https://www.publictalksoftware.co.uk/2018/05/21/s-89-slips-highlight-when-study-point-not-assigned/

I just have the message up page there now as I have lost the tab characters and can't seem to locate a revision of the page that I can restore. And editing the page is complicated. Not your plugin fault.

[ajtruckle]

Question:

I edited my original post with the code editor view of Wordpress and I pasted back in the content for the code snippets (so they were tab delimited). I pasted each set of code inside the [cc] shortcode chunks. But when I clicked "update page" I still ended up with everything on the left.

My other pages are all great, like:

https://www.publictalksoftware.co.uk/2019/03/25/customising-the-worksheet/

I just got to find a way to put the tabs into the original post that I messed up. :)

[AndiDittrich]

it's the standard WordPress behaviour in case the content is not wrapped into <pre> tags - therefore shortcodes has become deprecated in Enlighter years ago. Additionally unescaped html chars within the editor are a major issue