← Back

code-highlighter

Web Component to perform code highlighting on the body of the component

Author

Rating

Popularity

<100

<code-highlighter>

Performs code highlighting on the body of the element. Useful when Source Code (e.g. Java Code) needs to be rendered as part of View.

Demo of how this works is available here

Pre-requisite

First, make sure you have the npm (packaged with Node.js) installed.

Install the WebComponent

Run sudo npm install --save polymer-code-highlighter to install the Code-Highlighter webcomponent.

How to use in a HTML file

In the HTML file, please do following:

Add the script tag to get the code-highlighter.js.
Add the tag to highlight the sample code.

<!-- #1. Get the code-highlighter.js -->
<script type="module" src="node_modules/polymer-code-highlighter/code-highlighter.js"></script>
   
    <body>
    <div>
      <h3>Basic code-highlighter demo</h3>      
      <!-- #2. Add the tag -->
          <code-highlighter lang="java">   
            <!-- java code to be highlighted -->
            class Person {
              private firstName = "Vikram";
              private lastName = "Rawat";

              public String getFirstName(){
                return firstName;    
              }

              public String getLastName(){
                return lastName;    
              }
            } 
          </code-highlighter>      
    </div>
  </body>

How to use in a Custom Polymer 3 Element

In the custom element js file, please do following:

Import the code-highlighter.js
Add the tag to highlight the sample code.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

<!-- #1. Get the code-highlighter.js -->
import '../node_modules/polymer-code-highlighter/code-highlighter.js'

class MyView2 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class="card">       
        <!-- #2. Add the tag -->
        <code-highlighter lang="java">
            private void getValue(){
                 String name = "Vikram";
           }
        </code-highlighter>

      </div>
    `;
  }
}

window.customElements.define('my-view2', MyView2);

Limitations

Currently supports highlighting for Java Code snippets only.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

@polymer/polymer#^3.0.0

Released: 2018-10-23
Maturity: IMPORTED
License: BSD 3-clause "New" or "Revised" License

Compatibility

Framework: Polymer 3.0+
Browser: Browser Independent

code-highlighter - Vaadin Add-on Directory

Web Component to perform code highlighting on the body of the component

[![npm version](https://badge.fury.io/js/polymer-code-highlighter.svg)](https://badge.fury.io/js/polymer-code-highlighter) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/polymer-code-highlighter) # \ Performs code highlighting on the body of the element. Useful when Source Code (e.g. Java Code) needs to be rendered as part of View. Demo of how this works is available [here](https://www.webcomponents.org/element/polymer-code-highlighter/demo/demo/index.html) ## Pre-requisite First, make sure you have the npm (packaged with [Node.js](https://nodejs.org)) installed. ## Install the WebComponent Run `sudo npm install --save polymer-code-highlighter` to install the Code-Highlighter webcomponent. ## How to use in a HTML file In the HTML file, please do following: 1. Add the script tag to get the code-highlighter.js. 2. Add the tag to highlight the sample code. ``` html

Basic code-highlighter demo

class Person { private firstName = "Vikram"; private lastName = "Rawat"; public String getFirstName(){ return firstName; } public String getLastName(){ return lastName; } }

``` ## How to use in a Custom Polymer 3 Element In the custom element js file, please do following: 1. Import the code-highlighter.js 2. Add the tag to highlight the sample code. ``` js import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; import './shared-styles.js'; import '../node_modules/polymer-code-highlighter/code-highlighter.js' class MyView2 extends PolymerElement { static get template() { return html`

private void getValue(){ String name = "Vikram"; }

`; } } window.customElements.define('my-view2', MyView2); ``` ## Limitations 1. Currently supports highlighting for Java Code snippets only.

Directory