Yes, that makes sense! Thanks for all the help. I submitted a feature
request <https://github.com/Jermolene/TiddlyWiki5/issues/2812> on github.
Best,
Altug
On Friday, March 24, 2017 at 2:27:31 AM UTC-4, BJ wrote:
>
> ah!
> The markup produced by ckeditor is correct, the problem is that the
> hightlight plugin does not support the standard way of interacting with
> hightlight.js.
>
> If you know how to use github you can add a feature request (to support
> <pre><code class="language-python">), or I could it.
>
> all the best
>
> BJ
>
>
>
> On Friday, March 24, 2017 at 5:22:27 AM UTC+1, AltugOz wrote:
>>
>> Hi BJ,
>>
>> Thanks and you are right! That code snippet works. However, this is
>> because I made a mistake in my original post and somehow got the two code
>> examples switch places. Sorry, this must have caused a lot of confusion.
>> The html generated by ckeditor is the other one:
>>
>> <pre><code class="language-python">import base64
>> with open("t.png", "rb") as imageFile:
>> str = base64.b64encode(imageFile.read())
>> print str</code></pre>
>>
>> The code snippet you tested was the one generated by highlight.js, which
>> works as expected.
>>
>> So, the issue remains. There is currently no way that I am aware of, in
>> which one can edit text in ckeditor that will also show up with syntax
>> highlighting in the rendered tiddler.
>>
>> I understand that this is inherently due to the way ckeditor generates
>> the html using its codesnippet add-on and has nothing to do with
>> VisualEditor plugin. So, maybe we are out of luck in this case.
>>
>> Still I am very interested to know if there is another way to markup text
>> in ckeditor (i.e. not using its code snippet add-on) that will show up as a
>> syntax highlighted code snippet in Tiddlywiki, hopefully without jumping
>> through too many hoops.
>>
>> Best,
>>
>> Altug
>>
>> P.S. For completeness, I fix the description of problem in my original
>> post as follows:
>>
>> ---
>> ... I attached two screenshots, one with ckeditor 'editor view' and one
>> with the rendered view of the resulting tiddler. Here are my observations:
>>
>> 1. Using ckeditor's codesnippet add-on: Syntax highlighting *works* in
>> edit view, but doesn't show up in the resulting tiddler.
>>
>> 2. Code snippet with Wikitext markup and TW5 highlight.js plugin: The
>> result is verbatim text with some html markup.
>>
>> Here is the html source generated by case 1 i.e. using ckeditor and its
>> codesnippet add-on:
>>
>> <pre><code class="language-python">import base64
>> with open("t.png", "rb") as imageFile:
>> str = base64.b64encode(imageFile.read())
>> print str</code></pre>
>>
>> in comparison to what is generated using TW5 highlight.js plugin (in a
>> separate tiddler where syntax highlighting works):
>> <span class="hljs-keyword">with</span> open(<span class="hljs-string">
>> "t.png"</span>, <span class="hljs-string">"rb"</span>) <span class=
>> "hljs-keyword">as</span> imageFile:
>> str = base64.b64encode(imageFile.read())
>> <span class="hljs-keyword">print</span> str</code></pre>
>>
>> ...
>> ---
>>
>>
>>
>> On Thursday, March 23, 2017 at 8:03:31 AM UTC-4, BJ wrote:
>>>
>>> Hi Altug,
>>>
>>> If I go to http://tiddlywiki.com/plugins/tiddlywiki/highlight/ and
>>> paste this html (i.e. your example) into a new tiddler it shows correctly.
>>> So I guess that you have not got the tiddlywiki highlight plugin setup
>>> correctly.
>>>
>>> all the best
>>>
>>> BJ
>>>
>>>
>>> <pre class="python hljs"><code><span class="hljs-keyword">import</span>
>>> base64
>>>
>>> <span class="hljs-keyword">with</span> open(<span class="hljs-string">
>>> "t.png"</span>, <span class="hljs-string">"rb"</span>) <span class=
>>> "hljs-keyword">as</span> imageFile:
>>> str = base64.b64encode(imageFile.read())
>>> <span class="hljs-keyword">print</span> str</code></pre>
>>>
>>>
>>>
>>> On Sunday, March 19, 2017 at 4:36:19 PM UTC+1, AltugOz wrote:
>>>>
>>>> Dear All,
>>>>
>>>> I have been using BJ's wonderful Visual Editor Plugin (
>>>> http://bjtools.tiddlyspot.com/#VisualEditor) to put down my notes in a
>>>> WYSIWYG manner and I finally managed to get things work to my liking
>>>> except
>>>> for the appearance of the code snippets.
>>>>
>>>> My aim is to get a form of syntax highlighting in the resulting tiddler
>>>> similar to the way done by highlight.js plugin in TW5 but using the
>>>> CKEditor. I am using a custom build of CKeditor with the codesnippet
>>>> add-on
>>>> and also have thehighlight.js plugin installed on TW5 (5.1.13).
>>>> Unfortunately I couldn't get it to work so far. I wonder whether anyone
>>>> has
>>>> tackled with this problem before or has suggestions on the direction to
>>>> proceed.
>>>>
>>>> I attached two screenshots, one with ckeditor 'editor view' and one
>>>> with the rendered view of the resulting tiddler. Here are my observations:
>>>>
>>>> 1. Using ckeditor's codesnippet add-on: Syntax highlighting *works* in
>>>> edit view, but doesn't show up in the resulting tiddler.
>>>>
>>>> 2. Code snippet with Wikitext markup and TW5 highlight.js plugin: The
>>>> result is verbatim text with some html markup.
>>>>
>>>> Here is the html source generated by case 1 i.e. using ckeditor and its
>>>> codesnippet add-on:
>>>>
>>>> <pre class="python hljs"><code><span class="hljs-keyword">import</span>
>>>> base64
>>>>
>>>> <span class="hljs-keyword">with</span> open(<span
>>>> class="hljs-string">"t.png"</span>, <span class="hljs-string">"rb"</span>)
>>>> <span class="hljs-keyword">as</span> imageFile:
>>>> str = base64.b64encode(imageFile.read())
>>>> <span class="hljs-keyword">print</span> str</code></pre>
>>>>
>>>> in comparison to what is generated using TW5 highlight.js plugin (in a
>>>> separate tiddler where syntax highlighting works):
>>>> <pre><code class="language-python">import base64
>>>>
>>>> with open("t.png", "rb") as imageFile:
>>>> str = base64.b64encode(imageFile.read())
>>>> print str</code></pre>
>>>>
>>>> I am very new to html and js but those look quite different to me. Is
>>>> there a way to reconcile the way CKEditor does syntax highlighting with
>>>> the
>>>> 'default' way TW5 does using the highlight.js plugin?
>>>>
>>>> I need to add that I have only found out about Tiddlywiki a few months
>>>> ago but it has revolutionized the way I take and organize my notes! Plus
>>>> the wonderful community that is active, creative and always willing to
>>>> help.
>>>>
>>>> Thank you!
>>>>
>>>> Altug
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/cda04ef8-3ae4-4240-8d01-c1ad0d59a109%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
