Code Syntax Highlighting in Atto

Code Syntax Highlighting in Atto

написао/ла Joël Schmid -
Број одговора: 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

Просек оцена: -
У одговору на Joël Schmid

Re: Code Syntax Highlighting in Atto

написао/ла na li -

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


Просек оцена: -
У одговору на na li

Re: Code Syntax Highlighting in Atto

написао/ла Joël Schmid -

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

Просек оцена: -
У одговору на Joël Schmid

Re: Code Syntax Highlighting in Atto

написао/ла AL Rachels -
Слика Core developers Слика Particularly helpful Moodlers Слика Plugin developers Слика Testers

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

Просек оцена: -
У одговору на Joël Schmid

Re: Code Syntax Highlighting in Atto

написао/ла na li -

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

Просек оцена: -
У одговору на na li

Re: Code Syntax Highlighting in Atto

написао/ла Joël Schmid -

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

Просек оцена:Useful (2)
У одговору на Joël Schmid

Re: Code Syntax Highlighting in Atto

написао/ла na li -

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

Просек оцена: -
У одговору на Joël Schmid

Re: Code Syntax Highlighting in Atto

написао/ла na li -

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

Просек оцена:Useful (3)
У одговору на Joël Schmid

Re: Code Syntax Highlighting in Atto

написао/ла C Behan -

Hi all,


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

Catherine

Просек оцена: -
У одговору на C Behan

Re: Code Syntax Highlighting in Atto

написао/ла na li -

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

Просек оцена: -
У одговору на na li

Re: Code Syntax Highlighting in Atto

написао/ла C Behan -

Hi Lina,


Sorry, I misunderstood your query.поспан 

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


Catherine

Просек оцена: -
У одговору на C Behan

Re: Code Syntax Highlighting in Atto

написао/ла na li -

Hi Catherine,

Many thanks for your kind help.смешак

Cheers,

Lina

Просек оцена: -
У одговору на na li

Re: Code Syntax Highlighting in Atto

написао/ла Justin Hunt -
Слика Particularly helpful Moodlers Слика Plugin developers

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.


Просек оцена:Useful (1)
У одговору на Justin Hunt

Re: Code Syntax Highlighting in Atto

написао/ла Sam Mudle -

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.

Просек оцена: -
У одговору на Sam Mudle

Re: Code Syntax Highlighting in Atto

написао/ла Sam Mudle -

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;
}
Просек оцена: -
У одговору на Justin Hunt

Re: Code Syntax Highlighting in Atto

написао/ла Sam Mudle -

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:

Просек оцена: -