Showing Code Snippets for the default Body field in Classic Theme

[DansDomain]

Hi, newbie here.

Presently I have code on my site that I want users to be able to copy and paste for their own purposes.

Unfortunately if I indent it, it all gets lost as the formatter rewrites everything as soon as I hit Save.

I need to be able to wrap my code snippet in something that lets me indent it and style it with CSS.

Anyone know how I can do that?

echo 'This site has a Code button...';
echo 'That's precisely what I need in my editor...';
echo 'Where do I get it?';

 

[virtualgadjo]

Hi,

hard to answer without knowing which formatter you're speaking about and in which type of field
what i can just say about the code snippet you've posted is, in a template code it would easy to indent with \t

echo "\t\t" . 'This site has a Code button...' . "\n";
echo "\t\t" . 'That's precisely what I need in my editor...' . "\n";
echo "\t\t" . 'Where do I get it?' . "\n";

would indent each line with two tabs and \n will create a new line, your three echo will end in a single line
but i guess that's not the actual code you're writing... ?

have a nice day

[Jan Romero]

What TextFormatter are you using? The Parsedown formatter for example will wrap indented blocks in <pre><code></code></pre> tags. It will also give the code tag a class if you use backtick syntax and specify a language:

Quote

Some prose text.

```SQL
select *
from pages p
    left join field_title t on p.id = t.pages_id
where p.templates_id = 69
```

More prose.

Will turn into:

<p>Some prose text.</p>
<pre><code class="language-SQL">select *
from pages p
    left join field_title t on p.id = t.pages_id
where p.templates_id = 69</code></pre>
<p>More prose.</p>

Then you can use the class to apply syntax highlighting.

[virtualgadjo]

what @Jan Romero says ?

and i would just add, if your code snippets are parts of a larger ckeditor content type, you could just add their code snippet plugin and, if you want it to be stylized the dev fashion way, add the code snippet geshin plugin too ? ckeditor is easy to customize and has a bunch of plugins you can use depending on what you need

have a nice day

[DansDomain]

19 minutes ago, Jan Romero said:

What TextFormatter are you using? The Parsedown formatter for example will wrap indented blocks in <pre><code></code></pre> tags. It will also give the code tag a class if you use backtick syntax and specify a language:

Will turn into:

<p>Some prose text.</p>
<pre><code class="language-SQL">select *
from pages p
    left join field_title t on p.id = t.pages_id
where p.templates_id = 69</code></pre>
<p>More prose.</p>

Then you can use the class to apply syntax highlighting.

This! Thank you!

Exactly what I needed.

This saves me enormous hardship, ahh.

*waves of relief pass over me*

Thanks again.

[DansDomain]

Like a typical n00b I have rushed to the conclusion everything would work without first testing. I think I'ma stop doing that.

I have added this textformatter to my body's Detail tab under Textformatters.

In the module's Test section, ```CSS     blah { some fake CSS: 10px; } ```  works flawlessly, anything does.

But in my editor, once I save, it doesn't apply the Textformatter obviously... I must have missed a step?

It just outputs the same thing I put in:   ```CSS  etc. 

literally.........

Any suggestions please?

Thx

Edited October 19, 2022 by DansDomain

[DansDomain]

Oh, is this because I'm using CKEditor? Should I switch it to textarea?

 

[DansDomain]

48 minutes ago, virtualgadjo said:

what @Jan Romero says ?

and i would just add, if your code snippets are parts of a larger ckeditor content type, you could just add their code snippet plugin and, if you want it to be stylized the dev fashion way, add the code snippet geshin plugin too ? ckeditor is easy to customize and has a bunch of plugins you can use depending on what you need

have a nice day

Hey I'm interested in this, but where do I look?

I'm a little confused as to what to do and where to get this...

[virtualgadjo]

Hi,

juste for those two plugins, you'll find the links here
https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html

just pay attention when you download a plugin, quite often there are dependencies you'll have to download and install too

installing a plugin is often as easy as putting the folder into the pw site/modules/InputfieldCKEditor/plugins folder that pw creates the first time you choose CK editor as your textarea field type
afterwards, in you CKE field config you'll see the list of plugins that are in this folder, check the ones you need

when a simple functionnality like nbsp for example, nothing else to do, when the plugin allows you to add a button to the toolbar, will be your case, just add its name in the toolbar list of buttons the pw way where you want it to be
you'll probably have to test where to use uppercases but honestly, it works like a breeze too ?

have a nice day and CKEditor trip ?

[DansDomain]

56 minutes ago, virtualgadjo said:

Hi,

juste for those two plugins, you'll find the links here
https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html

just pay attention when you download a plugin, quite often there are dependencies you'll have to download and install too

installing a plugin is often as easy as putting the folder into the pw site/modules/InputfieldCKEditor/plugins folder that pw creates the first time you choose CK editor as your textarea field type
afterwards, in you CKE field config you'll see the list of plugins that are in this folder, check the ones you need

when a simple functionnality like nbsp for example, nothing else to do, when the plugin allows you to add a button to the toolbar, will be your case, just add its name in the toolbar list of buttons the pw way where you want it to be
you'll probably have to test where to use uppercases but honestly, it works like a breeze too ?

have a nice day and CKEditor trip ?

Hey thanks so much. This is great advice.

However I'm still confused on a few things.

I got this far but my toolbar items in CKEditor config don't indicate anything about CodeSnippets: Available core toolbar items: About, Anchor, Blockquote, Bold, BulletedList, Copy, CopyFormatting, CreateDiv, Cut, Find, Flash, Format, HorizontalRule, Iframe, Image, Indent, Italic, JustifyBlock, JustifyCenter, JustifyLeft, JustifyRight, Language, Link, Maximize, NewPage, NumberedList, Outdent, PageBreak, Paste, PasteFromWord, PasteText, Preview, Print, PWImage, PWLink, Redo, RemoveFormat, Replace, Save, Scayt, SelectAll, ShowBlocks, Smiley, Source, Sourcedialog, SpecialChar, SpellChecker, Strike, Styles, Subscript, Superscript, Table, Templates, Underline, Undo, Unlink

Here are the plugins I have installed via the interface (I just put them in plugins folder like you said to, and then checked the box and clicked Save here):

My toolbar definitely doesn't have another button in it yet... probably because, like you already said, I have to add it to the list !!! But I don't know what to add and there's no indication of CodeSnippet in there...

Any help please?

Also it says I need highlight.js , so I went to that site and downloaded it, but what do I do with it? It's not clear how I can make CKEditor notice it and use it ...

thanks

[virtualgadjo]

hi,

well, as i said, that's where you'll have to try... for example, try CodeSnippet or Codesnippet between commas if inside a line or just after a comma if at the end of a line, save and have a look at a page using the field
by default, pw only lists the... by default available buttons but you can add as much as you need ?

have a nice day again ?

[DansDomain]

3 minutes ago, virtualgadjo said:

hi,

well, as i said, that's where you'll have to try... for example, try CodeSnippet or Codesnippet between commas if inside a line or just after a comma if at the end of a line, save and have a look at a page using the field
by default, pw only lists the... by default available buttons but you can add as much as you need ?

have a nice day again ?

That worked! Thanks.  I was confused cuz it didn't say CodeSnippet in the list, but it definitely makes the button show up!

Now, how do I add tabbing to my code?

I have to use 4 spaces instead of a tab right now... or should I use &nbsp; ?    *confused again lol*

I just wanna indent my CSS, it doesn't let me just tab it out with the Tab key, does nothing...

[virtualgadjo]

oh, sorry, forgot to speak about highlight.js, honestly this is more a styling librairy you'll use for the front end... but you can also add a config.js file in the module folder to overwrite some default ones or add some functionnalities (sometimes useful event for some plugins) with

CKEDITOR.editorConfig = function( config ) {
    // your js
	// could be as simple as config.extraPlugins = 'codetag';
	// but you can add more :)
};

but i would not abuse of this possibility not to complicate things in the admin ?

[virtualgadjo]

actually, nbsp's is often the solution used by code highlighting plugins... but you may find something useful here
https://ckeditor.com/docs/ckeditor4/latest/examples/htmlformatting.html
?

[DansDomain]

Haha, thanks a million.  It turns out the browser is intercepting my keystroke when I press Tab, it takes my cursor out of the input field I am typing into for the code...

But if I copy and paste in a "    " TAB (4 space-wide tab, you know what I mean? but not actually 4 spaces lol) it works fine.

Good enough! Lol

[virtualgadjo]

?

i'm wondering if there weren't a plugin to insert tabs like the one that inserts &nbsp;'s but well, enough with plugins your copy paste solution is simple and simple is beautiful ?

have fun and a nice day ?

[virtualgadjo]

hi again,

as i love these little kind of challenges ? found out something
as i said, just add a config.js file inside the module folder (not the plugins one, just site/modules/InputfieldCKEditor/) with this

CKEDITOR.editorConfig = function( config ) {
    config.tabSpaces = 4;
};

and your tab key will add four &nbsp; in a row which you'll not be loosing on the front side

have a nice day ?

[bernhard]

You could also use this if I'm understanding you correctly:

 

[virtualgadjo]

hi,

wow, thansk a lot @bernhard i didn't know this module and it looks fantastic

i think that it's not exactly what @DansDomain was looking for because the full field is managed by the syntax higlighting you choose instead of being able to post a snippet inside a long piece of "normal" content but it gives me an idea, using ACE for a field, CKEditor for the text content and hannacode to insert the full code field into the CKEditor one, even two or three little snippets and hannacode with the name of the fields as a variable

well, sure when you have a lot of little snippets it's probably easier to use the codesnippet plugin and apply classes to the code tags to have them stylized on the front end but i can imagine cases where this ACE/hannacode solution would be very useful

thanks again and have a nice day ?

[bernhard]

You could also create pages that only have the code field and then reference as much snippets as you want with something like [code=123] where 123 is the page id. Or you use https://processwire.com/talk/topic/18289-processmention-forum-mentions-style-page-link-autocomplete-for-ckeditor/ then you could even include code snippets without any "coding". Or you use RepeaterMatrix to build a pagebuilder like experience.

[virtualgadjo]

@bernhard yeah, i love the page with all the needed snippets! exactly what i have done for a client who needed many carrousels they could use on several pages where they want
a parent page with children, each one containing a carrousel and hannacode to use those any where in content fields
@Robin S HannaCodeDialog could also help in this case

that's what i love with pw, with a little imagination, it lets you do whatever you want in an incredible easy way for the customers to edit ?

have a nice day