# DESCRIPTION
# Test of highlight.js
# written by Jan Hlavacek (jhlavace@svsu.edu)
# ENDDESCRIPTION
## DBsubject('')
## DBchapter('')
## DBsection('')
## KEYWORDS('')
## TitleText1('')
## EditionText1('')
## AuthorText1('')
## Section1('')
## Problem1('')
## Author('Jan Hlavacek')
## Institution('SVSU')
DOCUMENT();
HEADER_TEXT(<<'EOF');
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.dark.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/julia.min.js"></script>
<script language="javascript" type="text/javascript">
<!-- //
hljs.initHighlightingOnLoad();
// -->
</script>
EOF
loadMacros(
"PGstandard.pl",
"MathObjects.pl",
"PGML.pl",
"PGcourse.pl",
);
Context("Numeric");
# Define variables here:
# Actual problem goes here:
TEXT(beginproblem());
BEGIN_PGML
Using preformatted text is PGML:
: A = [|[1 2; 3 4]|]
: s = "Blah blah"
: d = det(A)
: if false
: d = length(s)
: end
Problem is that in preformatted text, each line is in its own <pre><code>...</code></pre> block
which confuses the highlighter. There is also no way to specify language.
The following is a code inserted directly into the html file outside of PGML blocks:
END_PGML
TEXT( MODES(TeX=>'', HTML=><<'END_SCRIPT' ) );
<pre><code class="julia">A = [1 2; 3 4]
s = "Blah blah"
d = det(A)
if false
d = length(s)
end</code></pre>
END_SCRIPT
BEGIN_PGML
This gets correctly highlighted, but will not show up in TeX version.
What is the value of d? [_______]{-2}
END_PGML
# Solution:
BEGIN_PGML_SOLUTION
*SOLUTION*
hkjhkj
END_PGML_SOLUTION
ENDDOCUMENT();
So I tried to use javascript to get syntax highlighting in code snippets. It sort of works, but is kind of rough:
Problem is that in preformatted text, each line is in its own <pre><code>...</code></pre> block
I'm not seeing that. Your example pre formatted text shows up as a single <pre><code> pair for me (containing all the lines). I'm wondering if it is browser-dependent. What browser are you using, and what OS? Also, are you working in the PREP2015 course, or on another server?
I will think about a better solution for you, though I may not get one right away.
I'm not seeing that. Your example pre formatted text shows up as a single <pre><code> pair for me (containing all the lines). I'm wondering if it is browser-dependent. What browser are you using, and what OS? Also, are you working in the PREP2015 course, or on another server?
I will think about a better solution for you, though I may not get one right away.
Strange. When I was looking at it first, each line had a separate <pre><code> tags. Now after I rewrote the problem, it looks like this:
Using preformatted text in PGML: <pre style="margin:0"><code>A = [1 2; 3 4] s = “Blah blah” d = det(A) if false d = length(s) </code></pre> <pre style="margin:0"><code>end</code></pre>
Now only the last line has its own <pre><code> tags. This is how it ideally should transalte:
<pre><code class="julia">A = [1 2; 3 4] s = "Blah blah" d = det(A) if false d = length(s) end</code></pre>
The main difference is the smart quotes, they probably should not be in a code display (I know you told us how to get rid of those), and the 'class="julia"' attribute. It seems that the highlighter will not autodetect the language without that, even though it is supposed to. I wonder if the smart quotes and the missing 'end' for the 'if' statement confuse it. The 'end' on the separate line gets highlighted correctly.
Actually, when I am looking at it in a debugger, the first part of the code is detected as "makefile" (why??, maybe the uppercase variable being assigned to on the first line?), while the 'end' on a separate line as "ruby" (that kind of makes sense).
As far as browser goes, it seems to work the same way in firefox (actually iceweasel) and chromium. And elinks. And w3m.
OK, I see the two blocks now. It turns out that it only happens if there is a paragraph following the code, and I didn't have that in my examples. Looks like an issue in the parsing code. I will look into it.
I'm also looking at adding a new "code block" command that does pre-formatted verbatim (as you would want for code) and allows you to specify the class. Something like
``` julia your code here ```The parser or PGML is pretty complicated, and it has been a while since I worked with it in any detail, so it may take me a while to work it out. Doing it right may also require system-level changes, so a real solution may need to wait for a new version of WeBWorK.
OK, I've found the problem with the extra pre/code block and have fixed it in the copy of PGML.pl in the PREP2015 course.
I've also added the ability to use
``` class preformatted code that will be displayed verbatim with tabs converted to 4 spaces ```The
class is optional, and must consist of alphanumeric characters followed by a newline. The main code follows between the ``` delimiters. It will retain the line breaks and spacing from the PGML source code, and no further PGML commands are performed on the code (so you can't do bold or math or anything like that).
I haven't included any code highlighting javascript myself, but you can do so as you have been doing. Making that part of PGML will require adding the javascript to the WeBWorK distribution and so it will be something I can't easily add locally for this course.
This is not very heavily tested, so let me know if you see anything fishy. I hope this meets your needs.