https://discord.umbraco.com logo
Join DiscordCommunities
Powered by
[Solved] TinyMCE Codesample plugin - syntax highli...
# help-with-umbraco
o
Hi all, I used to use the codesample plugin on TinyMCE, for codesamples in rich text, and prism.js on the frontend for sytax hylighting, in Umbraco 8. But I can't seem to get syntax highlighting working on Umbraco 12... I've enabled the plugin with the following app settings:
Copy code
json
  "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "Commands": [
          {
            "Alias": "blockquote",
            "Name": "BlockQuote",
            "Mode": "Selection"
          },
          {
            "Alias": "codesample",
            "Name": "Code Sample",
            "Mode": "Insert"
          },
          {
            "Alias": "fullscreen",
            "Name": "Full Screen",
            "Mode": "Selection"
          }
        ],
        "Plugins": [
          "codesample",
          "fullscreen"
        ]
      }
    }
  }
Which makes it available in the rich text editor (see screenshot). I then downloaded the css and js files from: https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+csharp+css-extras+csv+docker+git+json+log+markdown+powershell+python+jsx+tsx+regex+scss+scheme+solution-file+sql+typescript+xml-doc+yaml&plugins=line-highlight+line-numbers+show-language+highlight-keywords+inline-color+toolbar+treeview and added them to my frontend. But syntax highlighting is just not working on the frontend, every guide online says it should "just work"... does anyone have any ideas?
h
Mmm, it works fine for me, I don't think I'm doing anything different
o
I must be missing something simple...
h
I'll check my code tomorrow
o
Cheers Huw 🙂
Ok, so it worked for a second when I just saved/published my content node, but stopped working when I saved/published it again... Looking at the rollback difference, I can see the correct html elments that was added by the TinyMCE codesample plugin, which have now been stripped out... I have no idea what I did to get it to add them just now... but it's back to not adding them at all now 😭
Just bumping this in case anyone has any ideas? I'm still seeing this issue in v13.2.2.
On my node where the highlighting is working, the raw value of the RTE in the database is decorated with the prism html elements (checked with ssms) https://cdn.discordapp.com/attachments/1172553816110010541/1223746189757907126/image.png?ex=661af973&is=66088473&hm=de9ca1944a0e3fad8ef8b8057c6430ddaebacbb56ca8023b93e673fd165439dd&
But on my other node, where it isn't working, I can see that the raw value of the RTE in the database is missing those additional html elements... https://cdn.discordapp.com/attachments/1172553816110010541/1223746218426110113/image.png?ex=661af97a&is=6608847a&hm=50b0b40405a8ce804199cf1d122d02522d3ccd6216bb2f96fc38a11f92afd929&
m
Are they both rendered via the same property? There has been some traffic on discord re RTE as DoctypeProperty vs RTE as Block Property... and rendering issues If memory serves, around the valueconvertor.. can you check the raw content? https://docs.umbraco.com/umbraco-cms/reference/templating/mvc/examples#rendering-the-raw-value-of-a-field-from-ipublishedcontent
There is also a 
sanitizeTinyMCE
global setting.. wonder if this could be playing up? https://docs.umbraco.com/umbraco-cms/reference/configuration/globalsettings#sanitize-tinymce
m
(Suspect this might require v13! Sorry.) Since they introduced blocks to the RTE, I’ve leaned towards inserting blocks -vs- attempting to customize TinyMCE in any further way. Just proposing another possible solution — I obviously don’t know if it checks all your needs. Contentment has a code editor built right into it as a property editor. So a new element type with this code editor as a property, and a razor template to render it and you might have the same result?
o
The RTEs are not in blocks or anything, they're direct in the DocTypes. I can see in SSMS that the database value of the one that's working, in the 
umbracoPropertyData
does contain the additional classes around the code, but the one that doesn't work does not...
I had that set to true, so I changed it to false, but it made no difference 😦
That's a good shout! I think I might just go that route if TinyMCE just doesn't want to work
Looking at the raw RTE value, it seems as if the tiny mce codesample plugin is not inserting a 
<code>
element, which seems to be the cause (i'm guessing the PrismJS script needs that to add the highlighting) https://cdn.discordapp.com/attachments/1172553816110010541/1224718642415927316/image.png?ex=661e831e&is=660c0e1e&hm=06ba650e18efab52aa2f6b450f032d07bc7e41acb25ae845ca52e291774985e0&
And here's the bit that's got me earlier, it seems that when i insert a TinyMCE codesample, it saves it without markup (as expected), but it seems as if it inserts the formatting AFTER a save and publish! So if I then save and publish again, it saves the value with the formatting. But refreshing the page, strips that formatting out! 🙃 (see gif) From what I can tell, the PrismJS script on the frontend is what's supposed to be adding those decoration elements around the code, but because the codesample plugin isn't adding the 
code
element, it isn't doing it. But what's odd is that sometimes the TinyMCE editor saves the RTE value with those decoration elements already there! Which is why I was seeing it work inconsistently... https://cdn.discordapp.com/attachments/1172553816110010541/1224720068932538538/codesample_plugin_what.gif?ex=661e8472&is=660c0f72&hm=f6a4a33175a50bd57d5629a21e72aed3aa1bf06264f89b048e57e6f014416001&
m
maybe just a 
,-code
on the end for allow but remove if empty?
h
IIRC that is what I had to do, I'll check later
This is definitely what I did, added "code" to the end of validelements and added prism.js to the page template.
o
That's a good shout! I'll have a go at that when I'm home from work!
d
I'm using Prism in UmBootstrap and that sounds very familiar
o
Yup, can confirm that adding 
code
to the end of 
ValidElements
completely fixes the issue! Thank you all so much for your help!
3 Views
PreviousNext
Powered by