In the drupal 7, I installed the CKEditor module and setup the CKEditor with code snippet and code snippet geshi plugins and geshi in the libraries. I was able to do everything like starting the "code snippet" windows, entering a language and some source code, and saving them. The source code was highlighted accordingly in the CKeditor. However, the highlighting effect disappeared when I examined the souce code without the CKeditor.
I went ahead to install the Geshi Filter module and played with the options. I was able to get the line numbering but not the highlighing.
So I examined the source code. I found the wrapper generated by the code snippet window:
<pre><code class="language-javascript">
...
</code></pre>
According to the description of the Geshi Filter module, the wapper can not be handled correctly since only <code type="javascript">...</code> or <javascript>...</javascript> can be accepted.
Any help will be appreciated.
You should look at
You should look at the codesnippet widget definitions, both upcast and downcast methods.
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
Thank you for the information
Thank you for the information. I will try to make a new wrapper to fullfill the need.
May I ask some related questions?: Why the original wrapper is made this way? Is there any special consideration?
May I ask some related
This wrapper (pre>code[class="{lang}"]) is the most correct approach and is correctly handled e.g. by highlight.js. There is no <javascript> tag in HTML and <code> cannot have a type attribute, so editor couldn't produce such HTML.
You can change this behaviour of the code snippet plugin by overriding widget's downcast and upcast methods. See e.g. how Drupal 8's plugin for CKEditor does this: https://github.com/drupal/drupal/blob/8.0.x/core/modules/ckeditor/js/plugins/drupalimage/plugin.js.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
My change is minimum
Thank you for the info.
Here concludes my first effort:
1. enchance allowedContent and template to include the attribute "type".
2. In the data, if an new lang is there, use setAttribute('type',newlang) to add/set the new lang.
3. In the upcast, if matchResult is found, use attribute['type']=lang to set the lang.(I can not find the way to drop the attribute. so skip it.)
I understand the wrapper is made for highlight.js. I just feel uncomfortable to see when the ckeditor plugin codeSnippetGeshi is used, the highlighting can not stay consistently.
I prefer the server-side highlighting, In drupal, it would be nice to use ckeditor for editing some code and the code stay highlighted in any view.
You are right about that html <code> does not have an attribute 'type'. My effort will result in some invalid html. Since the code will only be handled by the drupal plugin "geshi filter", The effort seems workable for now. I will pass the information to the geshi owner for possible changes.
Thank you for the help.
Jim Sye
3. In the upcast, if
Use this JS statement: delete attributes.attrName
CKEditor has a codesnippetgeshi plugin which uses the same structure because it only sends contents (the code) that must be highlighted to the server. The wrapper is insignificant in this case. However, there might be a problem on the server, because AFAICS GeSHi hasn't got some one standard way of dealing with HTML. I saw different approaches when used with WordPress or Drupal, so unfortunately our plugin could not predict that. And besides that, it was more a proof of concept that the architecture of code highlighting widget which is implemented in the codesnippet plugin is extensible and can be used with a server side higlihghter too. So it's not supposed to be a solution working out of the box. This may be disappointing, but the lack of standard HTML parsing algorithm in GeSHi is a blocker.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
1. Thank you for providing
1. Thank you for providing the JS statement. With that, in the downcast, the empty the atrribute 'type' can be deleted.
2. Your comments are totally agreed.