No internet connection
  1. Home
  2. Support

New line displayed as "âŠ" in Prism.js

By Mateusz Bodnar @vimrh
    2018-06-25 09:04:28.944Z

    New lines in Prism.js box are displayed as "âŠ", don't know why and how to hide that. Screenshot shows the problem. It is probably Talkyard related, because "âŠ" shows only here. For example Prism.js works completly fine when loaded from the same .css and .js files on Ghost blogging software. And @KajMagnus, "âŠ" was still displayed before Your modification of Prism JS code. Should i fill bug report on Prism's Github?

    Solved in post #4, click to view
    • 5 replies
    1. Oh now wen you mention it, I see those weird line endings, in my test on localhost too (in a slightly different color, so bright that I didn't notice first).

      That's because of the Prism.js CSS file, here: https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css

      That looks like an old version of Prism: the version number is 0.0.1, however Prism's most recent version, is 1.15.0.

      That old prism.min.css file contains this: (I added line breaks)

      .token.tab:not(:empty):before{content:'â–¸'}
      .token.cr:before{content:'␍'}
      .token.lf:before{content:'␊'}
      

      which to me looks like characters displayed in the wrong charset somehow, or symbols the browser doesn't know how to display. And I suppose those characters are arrows representing tabs and line breaks, maybe sth like --> for tabs, and:

          |
        <-`
      

      for line breaks.

      Ok, so the solution is to use the most recent version of Prism.js :- )
      Instead of using the contents from these files:

      https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css
      https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js
      

      Go here: https://prismjs.com/, click Download, optionally configure Prism to look like you want it to (e.g. line numbers? copy-to-clipboard button? ... in the Plugins section a bit below), then scroll down to the bottom, and click Download JS and Download CSS, and copy-paste the contents of the files you'll download, into the JS and CSS fields. (And don't forget to delete the old CSS and JS ... except for the talkyard.postElemPostProcessor = ... at the end)

      (I tested, and the weird line ending chars then disappeared for me.)

      1. VMateusz Bodnar @vimrh
          2018-06-28 02:48:43.467Z

          It works! Thank you! However, if I try to upload content of 100KB prism.js file, HTTP error 413 shows up. Is there any way to modify nginx config files in docker container?

          1. There's a compile time hardcoded 100 kb limit in the Scala source code, for max text size. I can change to 300 kb or 400 kb, for JS and CSS.

            I noticed that the unminified Prism.js file can approach 200 kb in size if one includes really lots of plugins and languages, so maybe allowing 200 – 300 kb is useful, if later on one needs to debug some maybe-problem with Prism + Talkyard.

            There'll be a new version, later this week or early next week, I can send you a message then. (Until then, won't be possible to add more than 100 kb JS.)

            ReplySolution
            1. VMateusz Bodnar @vimrh
                2018-06-29 21:15:53.293Z

                Okay, please send me a message when new version will be available.

                1. Ooops the next version got released about 11 days ago ... I didn't remember to send a message about that until now, sorry.

                  The software should have auto upgraded itself already, so inserting 100 kb Prism Javascript should work, if you give it a try now.

                  I think I'll have to add bookmarks and todos to Talkyard, so I'll remember which people to reply to. Then I could have marked your reply with a To-Do-mark, incl a-reminder-email-after-1-week. Then I'd gotten a reminder email, and could then have replied sooner.