Enlighter in TablePress

Hi,

thanks for your post, and sorry for the trouble.

In principle, this is possible, but there’s no readily usable integration yet. But in general, you would only need to embed the relevant JS file into the page and then use the corresponding HTML markup in your table cells.
You could also look into using a dedicated plugin for such syntax highlighting, that can then maybe used via a Shortcode in a table cell.

Regards,
Tobias

Hi Tobias,
Thank you for your advise. And I am sorry for my late response. I had been trying to figure out my best way and I figured it with your great advice.

<<Question>> —-I wrote what worked and not after this question.
My only concern is that my javascript file is read just one line before jquery.datatables.min.js in footer (as $in_footer:true). When I put my javascript file after jquery.datatables.min.js, it didn’t work. In the future, my javascript file may be put after jquery.datatables.min.js without me knowing. Is there anyway to control the priority to make sure my javascript is read before jquery.datatables.min.js?

———————–Here is what I did and 4) is my choice————————–
<<EnlighterJS>>
1) Shortcode —Deprecated and didn’t work
I put the below in a cell but didn’t work.
[codegroup theme=”mytheme”]
[js tab="Javascript Message"]
$(window).on(‘load’,function(){});
[/js][/codegroup]

2) Custom Javascript at the bottom of a page where I put the table to show decorated code — This worked. This is the simplest way. But the table and page are independent and the best way is to have some code in a cell of table to show decorated code.

EnlighterJS.init('pre', 'code', {
                language : 'javascript',
                theme: 'enlighter',
                indent : 2
        });

3) Shortcode
I tried my own plug-in php to insert ---Didn't work.  Shortcode is processed before EnlighterJS is read.  So EnlighterJS.init was not recognized.  It is possible to run another action hook to putting the code at the bottom by passing some variables but it requires three step process and I was afraid that it is too complex for future modification.  So I gave up this method.  

<script>
EnlighterJS.init(‘pre’, ‘code’, {
language : ‘javascript’,
theme: ‘enlighter’,
indent : 2
});
</script>
`

4) Javascript file
I am inserting my own javascript file by wp_enqueue_script from my own plugin php file.
I put this EnlighterJS.init in $(function(){}) and inserting my javascript file be read after enlighterjs. This worked perfectly.

*************************************************
*THIS IS KEYWORDS I HAVE TO PUT IN ANY CELL
*************************************************

<script>var ichiri_enlighter={"lang":"nodejs","theme":"atomic","indent":5,"linenumbers":true}</script>;

*************************************************
*THIS IS THE FUNCTION I PUT IN MY JAVASCRIPT FILE
*************************************************

$(function(){
a={};
a.lang = ichiri_enlighter.lang?ichiri_enlighter.lang:'javascript';
a.theme = ichiri_enlighter.theme?ichiri_enlighter.theme:'atiomic';
a.indent = ichiri_enlighter.indent?parseInt(ichiri_enlighter.indent):4;
a.linenumbers = ichiri_enlighter.linenumbers?Boolean(ichiri_enlighter.linenumbers):false;
if(typeof ichiri_enlighter !== 'undefined'){
EnlighterJS.init('pre', 'code', {
language : a.lang,
theme: a.theme,
indent : a.indent,
linenumbers:a.linenumbers
});
}
})

**************************************************
*THIS IS THE DECORATED CODE BETWEEN

&

**************************************************

$(window).on('load',function(){});

• This reply was modified 3 years ago by jx2900.
• This reply was modified 3 years ago by jx2900.
• This reply was modified 3 years ago by jx2900.

**************************************************
*Code between pre tags is decorated in cells
**************************************************

<pre>$(window).on('load',function(){});</pre>

• This reply was modified 3 years ago by jx2900.

.

• This reply was modified 3 years ago by jx2900.

This also worked.
Specifying class=EnlighterJSRAW worked!

So I will use either one. If I want to keep adding codes in one table with same language, I call EnlighterJS.init().　　But if I put small number of codes or languages are different, then I would use below.


/*

$(window).on('load',function(){});

*/


Anyway, thank you always. I love TablePress.

Hi,

great to hear that it’s working! Thanks for sharing this!

Best wishes,
Tobias
?
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!