Google code-prettify Code highlighting not working for Polymer 3

Question

How to use Google code-prettify in Polymer 3?

The syntax highlighting is not working. Sample code below:

class MyView1 extends PolymerElement {
    static get template() {
        return html` 
      <style include="shared-styles">

 </style>

       <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

                <pre class="prettyprint">
                    <code class="language-java">
                        public static void getValue(){

                            String name = "Vikram";
                        }




                    </code>
                </pre>

I have added a working sample at https://stackblitz.com/edit/polymer-element-example-d7n14q where the code can be edited and run as well.

Is this all your code? It looks like the tagged template that starts at html` is unclosed. — Mike Samuel, Oct 08 '18 at 14:40
No this is not the entire code... I shared only a part to give an idea of the problem. — Vikram Rawat, Oct 08 '18 at 15:05
Please provide example code that parses as JavaScript. With a partial example, we can't rule out problems like a syntax error that prevents your code from ever running. — Mike Samuel, Oct 08 '18 at 15:47
@MikeSamuel I have added a running sample with editable code at https://stackblitz.com/edit/polymer-element-example-d7n14q Please help. — Vikram Rawat, Oct 12 '18 at 03:03
Try with https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css — Peca, Jul 09 '22 at 19:36

score 0 · Answer 1 · answered Oct 08 '18 at 15:23

0

Did you add the style.css of prettify? https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css

Also I would try to put the language class in the pre class attribute. (also use lang instead of language)

If it colours it but don't as you expect you could try to send the lang as a get param: https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=java

answered Oct 08 '18 at 15:23

FPazos

1
1

I have added the running sample at https://stackblitz.com/edit/polymer-element-example-d7n14q Have tried your fixes but it didn't work. Please review. – Vikram Rawat Oct 12 '18 at 03:04

score 0 · Accepted Answer · answered Oct 13 '18 at 12:18

0

This library is working in an old way and doesn't play well with ShadowDom. Instead you should use a library like Highlight.js which is available as a module. In polymer 3 first import the library with your specific language

import hljs from 'highlight.js/lib/highlight';
import java from 'highlight.js/lib/languages/java';
hljs.registerLanguage('java', java);

then highlight your element with

hljs.highlightBlock(this.$.code);

here a working example : https://stackblitz.com/edit/polymer-element-example-tthbbn

answered Oct 13 '18 at 12:18

eskan

309
1
3
13

Thanks a lot... this works. While the code sample is working, when I tried adding this in my actual code, I am getting this error: Uncaught (in promise) SyntaxError: The requested module '../node_modules/highlight.js/lib/highlight.js' does not provide an export named 'default' – Vikram Rawat Oct 13 '18 at 15:55
Do I need to use WebPack to fix this? – Vikram Rawat Oct 13 '18 at 16:13
it depends how you serve files ... you can import the full namespace with import { * as hljs} from 'highlight.js/lib/highlight'; – eskan Oct 13 '18 at 17:47

score 0 · Answer 3 · answered Oct 15 '18 at 15:26

0

It looks like you've got a solution using highlight, but to explain what's happening:

run_prettify.js prettifies everything in the DOM at onload time.

It doesn't recurse into shadow DOMs and doesn't prettify content that is added after onload.

You could address both issues by explicitly calling prettyPrintOne post render perhaps via Polymer.RenderStatus.afterNextRender though I don't know how that interacts with lithtml.

answered Oct 15 '18 at 15:26

Mike Samuel

118,113
30
216
245

prettyPrintOne is not defined error... how to define this in polymer? – Vikram Rawat Oct 16 '18 at 00:08
It now says "PR.prettyPrintOne is not a function... In WebStorm IDE, PR.prettyPrintOne(escape(this.$.code2), 'java', false); PR is resolved and clicking on it the IDE opens up prettify.js, which has a function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {.... but still IDE says prettyPrintOne is unresolved... – Vikram Rawat Oct 16 '18 at 01:52
@Vikram Rawat, I think you need to load prettify, not run_prettify. – Mike Samuel Oct 17 '18 at 14:10

Google code-prettify Code highlighting not working for Polymer 3

3 Answers3