Code Syntax Highlighting in Atto

Code Syntax Highlighting in Atto

Joël Schmid írta időpontban
Válaszok szám: 17

Hello 

It would be great to have a Code Syntax Highlighting for the most common programming languages in the Atto editor. I know there is the GeSHi Filter https://docs.moodle.org/31/en/Code_syntax_highlighting, but it hasn't been updated in a while and no one seams to have it running on Moodle Version 3.1. so far.  Furthermore I think the filter only supports the non-standard TinyMCE-Editor.

My Question: Is anyone running another filter/plugin for Syntax Highlighting and is satisfied with it? 

Thank you in advance for your inputs!

Cheers, Joël

Értékelések átlaga: -
Válasz erre: Joël Schmid

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Joël,

I have the same problem as you mentioned. I installed the GeSHi on Moodle 3.1 but the filter only works in label, or description. But it does not work in wiki content's text editor and other activities' content text editor.

Since you've posted your question on September 7, 2016, do you have any new findings about how to have the syntax highlighting function on Moodle Version 3.1?

Thanks.


Cheers, Lina


Értékelések átlaga: -
Válasz erre: na li

Re: Code Syntax Highlighting in Atto

Joël Schmid írta időpontban

Hey Lina

Sadly no, we didn't find any plugin which fulfilled or requirements and is well maintained. 

If more people would be interested in a syntax highlighting filter, maybe creating a feature request in https://tracker.moodle.org/ would make sense. I didn't find an existing one for syntax highlighting. 

Cheers, Joël

Értékelések átlaga: -
Válasz erre: Joël Schmid

Re: Code Syntax Highlighting in Atto

AL Rachels írta időpontban
Kép Kép Kép Kép

Hi Joël and Lina,

Have you got the Generico filter installed?  If so, there is a filter bundle named, Prettify, that works for "lang=c|bsh|cc|cpp|cs|csh|cyc|cv|htm|html|java|js|m|mxml|perl|php|pl|pm|py|rb|sh|vb|xhtml|xml|xsl"

If you have PoodLL3, you should be able to get the same filter bundle to work in the widgets.

https://moodle.org/mod/forum/discuss.php?d=261896&parent=1316329

https://moodle.org/mod/forum/discuss.php?d=261896

Értékelések átlaga: -
Válasz erre: AL Rachels

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi AL,

Many thanks for your reply. I haven't install the Generico filter yet. I will try your suggestions and let you know if it works.

Thanks a lot.

Best wishes,

Lina

Értékelések átlaga: -
Válasz erre: Joël Schmid

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Joël,

Thanks for your reply. Yes, I also did a few tests and still hasn't find a solution to solve this.

I installed the latest release of the Geshi from GitHub:https://github.com/enovation/moodle-filter_geshi on Moodle 3.1 and I also installed the filter on Moodle 2.6,  but the code highlighting feature doesn't work. Do you have the same problem?

For example, If I input the following code in the description text editor:


The highlighting display does work well.


But when I input the code in the wiki activity's page content, the text editor will automatically clear the highlighting code:


After I saved the content and go back to the text editor, I found that the code was cleared automatically:


Cheers,

Lina

Értékelések átlaga: -
Válasz erre: na li

Re: Code Syntax Highlighting in Atto

Joël Schmid írta időpontban

Hey Linda

We didn't test the geshi filter as the plugin doesn't fulfil our requirements. 

As you figured out by yourself, the HTMLplus atto plugin is only for the editing mode of atto and has nothing to do with syntax highlighting for the actual content. 

Did you try the generico filter yourself?

Cheers, Joël

Értékelések átlaga:Useful (2)
Válasz erre: Joël Schmid

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Joël,

I haven't got time to try the generico filter yet. I checked the documentation and it seems quite complicate. I need to develop a template first. I think I need to take some time to investigate the template first.

How about you? Have you tried the generico filter?

Cheers,

Lina

Értékelések átlaga: -
Válasz erre: Joël Schmid

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Joël,

I've tried the Generico Template with Justin's help. It works well.

In addtion, I found that the geshi filter code syntax highlight also works fine by adding the <code>...</code> tag.

For example, if we input this code # Read the data data <- read.csv("data.csv", header=TRUE) 

it will display like the below screenshot shows:


Cheers, Lina

Értékelések átlaga:Useful (3)
Válasz erre: Joël Schmid

Re: Code Syntax Highlighting in Atto

C Behan írta időpontban

Hi all,


Are you aware of this plugin? https://moodle.org/plugins/atto_htmlplus

Catherine

Értékelések átlaga: -
Válasz erre: C Behan

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Catherine,

Thanks for your suggestion. I've installed the HTMLplus atto, but it doesn't display the content with the highlighting. It's just during the editing mode, the code highlighting is working.

For example, from the moodle official document, there's an example of the css syntax highlighting:

https://docs.moodle.org/31/en/MoodleDocs:Style_guide#PHP_syntax_highlighting



Then, I've put the code by using the HTMLplus, but the display content does not have the highlighting




Cheers,

Lina

Értékelések átlaga: -
Válasz erre: na li

Re: Code Syntax Highlighting in Atto

C Behan írta időpontban

Hi Lina,


Sorry, I misunderstood your query.szundi 

I'm not on 3.1 yet myself so prob can't help you so.


Catherine

Értékelések átlaga: -
Válasz erre: C Behan

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Catherine,

Many thanks for your kind help.mosoly

Cheers,

Lina

Értékelések átlaga: -
Válasz erre: na li

Re: Code Syntax Highlighting in Atto

Justin Hunt írta időpontban
Kép Kép

Generico just sounds complicated.  Making templates is quite complex, but its pretty straightforward if all you do is use it.

I attached a template to this post. I uses highlight js to syntax highlight code inside pre tags (pre formatted .. from the atto format dropdown).

In the editor it looks like this (I put a red box around the Generico bits) from one of our courses:

And when displayed it looks like this:


You just need Generico set up and to use the code box template/bundle. That is attached. See the Generico filter info for how to use template/bundles.


Értékelések átlaga:Useful (1)
Válasz erre: Justin Hunt

Re: Code Syntax Highlighting in Atto

na li írta időpontban

Hi Justin,

Thank you very much for your kind help and the detail instructions. I used the codebox template. That's really helpful. The Generico template works well on Moodle 3.1.

Many thanks again.


Cheers, Lina

Értékelések átlaga:Useful (2)
Válasz erre: Justin Hunt

Re: Code Syntax Highlighting in Atto

Sam Mudle írta időpontban

Hi Justin,

I just tested your bundle on the newest Edge browser, and I'm able to copy paste the code when it's javascript.  Anyway, it seems to work well with regular Java when added the string to the config.

Random thought: Copying chunks of code into the moodle atto preformatted style can be problematic with the paragraph conversions.    Would be nice if there was an easy way to strip out the p characters and replace them with soft breaks.

Értékelések átlaga: -
Válasz erre: Sam Mudle

Re: Code Syntax Highlighting in Atto

Sam Mudle írta időpontban

Highlightjs has a bug where if I put a comment in javascript, it will syntax highlight everything below it like a comment as well.  When I get around to it, I'm gonna try out prism and some of the other highlighters.

Try this

if (x > 3)
{
   //This will mess up highlight js.
  y = 5;
}
Értékelések átlaga: -
Válasz erre: Justin Hunt

Re: Code Syntax Highlighting in Atto

Sam Mudle írta időpontban

Hi Justin,

So I found out what was messing up highlightjs when dealing with comments.  When Atto puts in a preformatted section, it will put in <BR>'s every time you do a soft enter (holding shift and pressing enter). It puts in a </PRE><PRE> every time you press enter without shift.  Well these extra tags screw up the hightlight script.

if (x == 3)<br>      BAD NEED TO REMOVE THESE BR's
{
  // I love pizza<br>
  System.out.println("HI");<br>
}

So I write some jquery scripts that scrub out the <BR>'s and replace them with \n's.  That makes the highlighter happy.  I haven't been able to replace the </PRE><PRE>'s because i'm not that gifted with jquery.  They are the containers and I'm not that smart.  So basically you have to go in and manually remove hard returns.

Anyway, i'm pretty happy with how it looks now.  I've attached it below:

Értékelések átlaga: -