Syntax highlighter

[Benjamin Besson]

Hello,

I'm in intership and I have to add a new composent to the text editor in studio.
I already installed Open edX on my ubuntu virtual machine, it works.

But now I don't know how to start. Maybe some of you could help me:
- do you know if there is already a syntax highlighter made by the community for open edx? (To write some code in HTML or JS with line number...)
- do you know where I can find the code for the text editor, I have to add a new button in the toolbar

I have got a syntax highlighter made in JS and I want to integrate it in the platform.

Thank you for your help!

Benjamin

[Andy Armstrong]

Hi Benjamin,

edX uses a library called CodeMirror for text editing, and it has support for highlighting a large number of languages:

https://codemirror.net/mode/

If the language you are looking for isn't supported, it also provides the ability to add your own.

You can see the Python code for the editor here:

https://github.com/edx/edx-platform/blob/master/common/lib/xmodule/xmodule/editing_module.py#L16

This in turn uses JavaScript to create the client-side editor. For example, here's the JSON version:

https://github.com/edx/edx-platform/blob/master/common/lib/xmodule/xmodule/js/src/raw/edit/json.coffee

I hope this helps.

 - Andy

--
You received this message because you are subscribed to the Google Groups "General Open edX discussion" group.
To view this discussion on the web visit https://groups.google.com/d/msgid/edx-code/646545f8-6147-4e34-8a05-6f10d7a13bd4%40googlegroups.com.

--

Andy Armstrong

edX | UI Architect  | an...@edx.org  

141 Portland Street, 9th floor

Cambridge, MA 02139

http://www.edx.org

[Benjamin Besson]

Hi Andy,

Thank you for taking the time to answer me :)

There is a thing I do not understand, you said that edX uses CodeMirror, so this library is already in the editor? Is it the { } button? It is the only one about code.
But this button does not make any line numbers nor word color.

[Andy Armstrong]

Hi Benjamin,

You are correct that the standard problem editor is not built with CodeMirror. You may want to look into the code response problems:

http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/exercises_tools/external_graders.html#create-a-code-response-problem

This will give you an editor with line numbers, syntax highlighting etc. Is your use case around programming languages?

 - Andy

--

You received this message because you are subscribed to the Google Groups "General Open edX discussion" group.

To view this discussion on the web visit https://groups.google.com/d/msgid/edx-code/7c729464-639a-400f-9b98-9f16e9be634b%40googlegroups.com.

[Benjamin Besson]

Hi Andy,

I need a syntax highlighter in the course editor because we have to write some code in our HTML course.
We did it with an external syntax highlighter hand-made, but it could be easier if it was integrated in edX.

Does this method with the mode="html"could provide a block code with line number in the course editor?

Thank you for you help!

Benjamin

[Andrew Miller]

Benjamin,

After much experimentation, we ended up using prismjs to highlight and format syntax in our assessments. I recall that we ran into some challenges where the code samples were actually being rendered as inline code rather than "fenced" code blocks, but we hacked our way around that by encoding certain elements as entities.

Here's a screen grab (you can click for the full size image). There are probably better examples in some of our other courses... and you can certainly check those out: http://www.thegymnasium.com. The following screen grab and samples from actual problems are from our JavaScript course. 

Here's an example of the simplest case:

>><strong>1) Which is the correct syntax to create a paragraph element?</strong><<

( ) <code>createElement("p");</code>

( ) <code>document.createElement("paragraph");</code>

( ) <code>document.createElement("&lt; p &gt;");</code>

(x) <code>document.createElement("p");</code>

[explanation]

The <code>createElement</code> method is called from document. Pass in the name of the HTML element, but without the angle brackets.

[explanation]

And more complex:

>><strong>5) Consider the following HTML:</strong><<

<pre>

<code class="language-javascript">

&#x3C;ul&#x3E;

&#x9;&#x3C;li&#x3E;Item one.&#x3C;/li&#x3E;

&#x9;&#x3C;li&#x3E;Item two.&#x3C;/li&#x3E;

&#x9;&#x3C;li&#x3E;Item three.&#x3C;/li&#x3E;

&#x9;&#x3C;li&#x3E;Item four.&#x3C;/li&#x3E;

&#x3C;/ul&#x3E;

</code>

</pre>

If the variable, <em>list</em>, points to that unordered list element, which of the following would point to the item labeled "Item two."?

( ) <code>list.childNodes[1];</code>

( ) <code>list.firstChild.firstSibling;</code>

(x) <code>list.children[1];</code>

( ) <code>list.secondChild;</code>

[explanation]

Be careful with properties that will return text nodes, such as <code>childNodes</code>, <code>firstChild</code>, and <code>firstSibling</code>. These children properties only return child elements.

[explanation]

Initially we'd thought to create an Xblock to handle these sorts of multiple choice problems. While that might be the better choice ideologically, gaps in the documentation were problematic for us at the time.

I hope this is useful.

- andrew

[Benjamin Besson]

Hi Andrew,

Thank you for you solution.
I have a few question for you: is this solution works in the course editor also? Because you did it on a problem case.
And is it possible to add line numbers?

Thank you!

Benjamin

[Andrew Miller]

Hey Benjamin - we had no interest or need to get this working in the course editor, so I really can't tell you if/how it could work. I don't think it will work in a text area entry field...

As for line numbers, yes... there is a parameter you can set so that prismjs will show the line numbers. Check their documentation for "plugins" and you should find that info readily.

-AM

[Benjamin Besson]

Thank you Andrew!
I will try if it is possible :)

Benjamin