Love this, another magician simple trick!
In reply to William Lu
Issue when making template for code samples because of curly bracket
by Alexander Lebeth -
I would like to use a genrico filter to pretty print some code samples. Since the code contains curly brackets, generico treats them as its own closing bracket, which results in a faulty result. Here's the code:
#include
int main()
{
int first, second, add, subtract, multiply;
float divide;
… some more code …
return 0;
}It's a bug or can I do something about it?
In reply to Alexander Lebeth
Re: Issue when making template for code samples because of curly bracket
by Justin Hunt -
The best way to do this is to specify body and end tags in the template. That way, you can then add content at will between the two Generico tags (body and end) and Generico will act on them. You are correct it doesn't handle escaping the } so this is the only way really.
I made a quick example using prettify of how this might work and attached the Generico bundle so you can import it. The tags on the page would look like this and you would sandwich your code between them.
{GENERICO:type="prettify",lang="php"}
{GENERICO:type="prettify_end"}
In practice because of all the html bits and pieces that get added in the text area, I have found this sort of thing tricky. So its best to format the entire content, including the two Generico tags, using the font selector thingy on Atto as "pre-formatted." That removes all the extra line breaks at least and keep the background color formatting uniform across the block of code.
In reply to Justin Hunt
Re: Issue when making template for code samples because of curly bracket
by Alexander Lebeth -
Dear Justin,
thank you very much!
But how do I import your bundle? I do not see an import option …
In reply to Alexander Lebeth
Re: Issue when making template for code samples because of curly bracket
by Justin Hunt -
An import option would be too obvious ....You have to drag the bundle from your file system onto the green "bundle" box on the top right of one of the template settings page. The border of the box should turn blue indicating its ok to drop the file there.
In reply to Justin Hunt
Re: Issue when making template for code samples because of curly bracket
by AL Rachels -
Hi everyone,
I have made a slight modification to Justin's prettify.txt that others of you may be interested in. Seems to work the way I want it to. Due to age and vision problems, I have trouble seeing the colors used by prettify unless I make all the text Bold. Since I tend to forget that manual step, I modified prettify.txt as shown and it automatically does it for me now.
In reply to AL Rachels
Re: Issue when making template for code samples because of curly bracket
by Alexander Lebeth -
Hello everyone,
I imported the prettify filter from Justins bundle (since I wanted to have line numbers, I altered the body to <code class="prettyprint linenums lang-@@lang@@">).
But it's a puzzle to me how to actually format the whole stuff! The code looks awful, lines are numbered incorrectly etc. What's the order of doing things?
This is what I did (using this code sample)
- In an empty editorfield I press the generico-button and insert the tags
- I place the cursor at the end of the line with the beginning tag and press the return-key
- The cursor is now in the new line, then I paste a code-snippet (optionally I remove copied styles with the remove-format button)
- I select the whole text, from the opening generico-tag to the ending-tag, including the code-snippet between
- The result is really ugly.
How do you get it working?
In reply to Alexander Lebeth
Re: Issue when making template for code samples because of curly bracket
by Justin Hunt -
Here is a screencast of me using it with the reverse number C code sample.
http://www.screencast.com/t/GA5r8Clt
Edit: Actually after I made the screencast I was able to reproduce what you described, when I added the "clear formatting" step. I think that really you are best to paste it into notepad or some such editor first, or it will come across with all sorts of html artifacts, that mess things up. The clear formatting step seems to exacerbate that.
I used a theme to make the background black (and didn't use line numbers ...maybe thats a factor).
All I did to use the black theme was upload the css code from one of the prettify sample skins into the template's upload CSS area.
Prettify Skins:
https://rawgit.com/google/code-prettify/master/styles/index.html
I also made the background of the whole div black or it looked weird. To do that I added the following CSS in the template's custom CSS area
.prettyprint {
background: #000;
display: inline-block; /* or block */
padding: 10px;
}
In reply to Justin Hunt
Re: Issue when making template for code samples because of curly bracket
by Alexander Lebeth -
Thanks a lot for your effort! But even when reproducing your steps and removing all applied formats with a code-editor, my code is not well displayed when using the class "linenums" (I even installed shoehorn theme to have the same preconditions). Could you post the source code of your HTML? I mean the source code in the atto-editor and maybe the fully rendered html code as it's displayed in the browser (all generico tags rendered)?
I think this would help me to tackle down the issue.
In reply to Alexander Lebeth
Re: Issue when making template for code samples because of curly bracket
by Justin Hunt -
I don't know a whole lot about prettify so I can't be too much help I am afraid. The line numbers also don't work very well for me(I only get line 1) , but it doesn't get messed up either.
I attached what you requested. I hope it helps.
In reply to Justin Hunt
Re: Issue when making template for code samples because of curly bracket
by Alexander Lebeth -
Dear Justin,
thanks again. I tackled down the issue: it's a mixture of obscured, intransparent atto behavior and a limitation of the html <pre> tag:
it can't deal with "<" and ">", but since in my code there was a tag "<stdio.h>" the whole thing messed up. What I did: I cleaned the code by substituting "<>{}" and some other characters by their html entities and inserted the cleaned code between the generico tags while being in atto's html/source-mode. Then everything is working.
In reply to Alexander Lebeth
Re: Issue when making template for code samples because of curly bracket
by Justin Hunt -
OK good job. But what a hassle. I found trying to parse text between tags in Generico was very difficult because of the html that creeps in, as you also discovered.
I don't know if you have a lot of these snippets that bust up like that. In one of my templates I added script to massage the html a bit before I passed it on for processing. You might use something like this to prevent yourself dropping into the source view all the time. That script was like this:
$('#' + @@AUTOID@@).each(function(){
var text = $(this).html();
text = text.replace(/<p>/g, ' \n');
text = text.replace(/<br>/g, ' \n');
$(this).html(text);
});
In reply to Justin Hunt
Re: Issue when making template for code samples because of curly bracket
by Alexander Lebeth -
Great suggestion – but since I am a rookie in JS, I totally don't know how and where to implement your snippet. And what's that @@AUTOID@@ for?
In reply to Alexander Lebeth
Re: Issue when making template for code samples because of curly bracket
by Justin Hunt -
The @@AUTOI@@ is a variable that contains an automatically generated pretty random id. You use this in your template so that when you assign id's to your divs and other html elements, you can ensure that it will be unique. And then you can use it again in your javascript to access those divs and elements.
The snippet would go in the custom javascript area of the template. But you would need to modify it for your purpose, and probably tweak things a bit.
Though you could pursue this path of trying to clean up the html from the template, I suspect its always going to be a bit fragile and easily broken.
After implementing prettyprint with generico, i got problems with the user interface under some circumstances:
when trying to edit a test, it is not possible to change the order with drag and drop or editing the grading points (see screenshot). I think there's javascript in conflict, see the console output here:
ReferenceError: prettyPrint is not defined
filter_generico_extfunctions[1]()
genericojs.php:1
M.filter_generico.loadgenerico()
module.js:1
<anonym>
edit.php:556
e._notify()
yui_combo.php:9
e._use/T()
yui_combo.php:9
e.Loader.prototype._finish()
yui_combo.php:16
e.Loader.prototype._onSuccess()
yui_combo.php:16
e.Loader.prototype._insert/p()
yui_combo.php:17
e.Loader.prototype._insert/<.onSuccess()
yui_combo.php:17
s.prototype._finish()
yui_combo.php:12
s.prototype._next()
yui_combo.php:12
s.prototype._progress()
yui_combo.php:13
h()
yui_combo.php:12
genericojs.php:1:140
Leerer String an getElementById() übergeben. jquery-1.11.2.min.js:23:1510
Screenshot of the broken UI:
Hope someone can help me out, I don't know much about javascript/UI stuff.
Thanks, Alexander
I can not say much from that. Is this different to the prettify template we used last time? Or the same?
Dear Justin,
this is my template (exported via the bundle feature):
{"key":"Code","instructions":"Choose programming language","requirecss":"","requirejs":"/lib/custom/run_prettify.js","defaults":"zeilennummern=linenums|no-nums,\nsprache=c|java|html","jquery":"0","amd":"0","body":"<pre><code class=\"prettyprint lang-@@sprache@@ @@zeilennummern@@\">","bodyend":"</code></pre>","script":"prettyPrint();","style":"","dataset":"","datasetvars":""}
In reply to Justin Hunt
Re: Issue when making template for code samples because of curly bracket
by Sam Mudle -
I added script to massage the html a bit before I passed it on for processing. You might use something like this to prevent yourself dropping into the source view all the time. That script was like this:
$('#' + @@AUTOID@@).each(function(){
var text = $(this).html();
text = text.replace(/<p>/g, ' \n');
text = text.replace(/<br>/g, ' \n');
$(this).html(text);
});I found that this won't work for the Prettify script. It requires AMD to be off -- then the jquery doesn't work. If you flip AMD on, then you get the dreaded NO DEFINE error.
So for now I use Highlightjs rather than Pretty which plays well with AMD. I strip out the <BR> tags. The only gripe is that Highlightjs does not put in line numbers.