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/b71ec0a6-afee-429b-9472-1ac973fd347c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
