refactor(#35): Web Component deckgo-code renamed to deckgo-highlight-code

Author: peterpeterparker

doc/components/components.md

@@ -6,7 +6,7 @@
 
 - [Gif](#gif)
 - [Chart](#chart)
-- [Code](#code)
+- [Highlight Code](#highlight-code)
 - [Youtube](#youtube)
 - [Social](#social)
 
@@ -64,13 +64,13 @@ The "Chart" component is an extra component which let you draw charts easily. Th
 
 The [DeckDeckGo] charts components are provided in separate extra library. If you don't use the starter kit and wish to add charts to your presentation, you will need to install this extra component from a CDN or [npm](https://www.npmjs.com/package/deckdeckgo-charts). See its related [installation guide](https://github.com/fluster/deckdeckgo-charts#getting-started).
 
-## Code
+## Highlight Code
 
-The "Code" component is an extra component which let you highlight code easily. This Web Component could be use in [DeckDeckGo] or in any other web projects. See its [documentation](https://github.com/fluster/deckdeckgo-code) for the details.
+The "Highlight Code" component is an extra component which let you highlight code easily. This Web Component could be use in [DeckDeckGo] or in any other web projects. See its [documentation](https://github.com/fluster/deckdeckgo-highlight-code) for the details.
 
 ### Note
 
-The [DeckDeckGo] code component is provided in separate extra library. If you don't use the starter kit and wish to add it to your presentation, you will need to install this extra component from a CDN or [npm](https://www.npmjs.com/package/deckdeckgo-code). See its related [installation guide](https://github.com/fluster/deckdeckgo-code#getting-started).
+The [DeckDeckGo] - Highlight code component is provided in separate extra library. If you don't use the starter kit and wish to add it to your presentation, you will need to install this extra component from a CDN or [npm](https://www.npmjs.com/package/deckdeckgo-highlight-code). See its related [installation guide](https://github.com/fluster/deckdeckgo-highlight-code#getting-started).
 
 ## Youtube
 

doc/slides/slides.md

@@ -489,11 +489,11 @@ The slots `title` and `code` are optional.
 
 #### Code components
 
-The slide "Code" relies on the code component `<deckgo-code/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
+The slide "Code" relies on the code component `<deckgo-highlight-code/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
 
 #### Installation
 
-The [DeckDeckGo] code component is provided in separate extra library. If you don't use the [DeckDeckGo] starter kit and wish to add the [DeckDeckGo] code to your project, you will need to install and integrate it from a CDN or [npm](https://www.npmjs.com/package/deckdeckgo-code) as described in its [installation guide](https://github.com/fluster/deckdeckgo-code#getting-started).
+The [DeckDeckGo] - Hightlight code component is provided in separate extra library. If you don't use the [DeckDeckGo] starter kit and wish to add the [DeckDeckGo] code to your project, you will need to install and integrate it from a CDN or [npm](https://www.npmjs.com/package/deckdeckgo-highlight-code) as described in its [installation guide](https://github.com/fluster/deckdeckgo-highlight-code#getting-started).
 
 #### Attributes
 
@@ -546,7 +546,7 @@ The following theming options will affect this component if set on its host or p
 | --slide-padding-bottom | 16px | Padding bottom of the all slide |
 | --slide-padding-start | 32px | Padding left of the all slide |
 
-Furthermore, this slide component offers the exact same CSS4 variables as the [DeckDeckGo] code Web Component, see its [documentation](https://github.com/fluster/deckdeckgo-code) for the details.
+Furthermore, this slide component offers the exact same CSS4 variables as the [DeckDeckGo] - Highlight code Web Component, see its [documentation](https://github.com/fluster/deckdeckgo-highlight-code) for the details.
 
 ### Slide: Author
 

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -44,7 +44,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
     return new Promise<void>((resolve) => {
       const code: HTMLElement = this.el.querySelector('[slot=\'code\']');
 
-      const codeComponent = this.el.shadowRoot.querySelector('deckgo-code');
+      const codeComponent = this.el.shadowRoot.querySelector('deckgo-highlight-code');
 
       if (codeComponent && code) {
         codeComponent.appendChild(code);
@@ -73,7 +73,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
   }
 
   private scrollToNext(swipeLeft: boolean): Promise<boolean> {
-    const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-code');
+    const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-highlight-code');
 
     if (element) {
       return (element as any).scrollToNext(swipeLeft);
@@ -86,7 +86,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
 
   private zoomCode(zoom: boolean): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-code');
+      const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-highlight-code');
 
       if (element) {
         await (element as any).zoomCode(zoom);
@@ -160,7 +160,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
                 onTouchEnd={() => this.touchScrollEnd()}>
       <slot name="title"></slot>
       <div class="deckgo-slide-code-container" onScroll={() => this.emitScrolling()}>
-        <deckgo-code src={this.src} anchor={this.anchor} anchorZoom={this.anchorZoom} hideAnchor={this.hideAnchor} language={this.language}></deckgo-code>
+        <deckgo-highlight-code src={this.src} anchor={this.anchor} anchorZoom={this.anchorZoom} hideAnchor={this.hideAnchor} language={this.language}></deckgo-highlight-code>
       </div>
       <slot name="code"></slot>
     </div>;