Update layout and readme

Author: CodyTolene

README.md

@@ -19,10 +19,10 @@
 [![Website Status](https://img.shields.io/website?down_color=lightgrey&down_message=Offline&label=Website&up_color=green&up_message=Online&url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)
 [![Gitter Chat](https://badges.gitter.im/ProAngular/lobby.svg)](https://gitter.im/ProAngular/community)
 [![Discord Chat](https://img.shields.io/discord/1003103094588055552?label=Discord)](https://discord.com/channels/1003103094588055552)
-[![GitHub Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)
-[![npmjs Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)
 [![Sponsors](https://img.shields.io/github/sponsors/proangular?label=Sponsors)](https://github.com/sponsors/ProAngular)
 [![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)
+[![GitHub Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)
+[![npmjs Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)
 
 <!--
 [![StackBlitz](https://badgen.net/badge/StackBlitz/Offline/red)]()
@@ -104,12 +104,30 @@ export class FeatureModule { }
 
 ## Dependencies
 
-### Styling
+### Styling UX - Angular Material
 
  You should have an Angular Material theme set up prior to using this, but it's not strictly neccessary. Disabled by default, you can alternatively use the `materialTheme` component input (see API documentation below) to auto load a pre-defined Angular Material theme from a CDN. I don't recommend depending on the CDN or this approach, but I wanted to make it possible for you. It's also possible to use this without an angular theme and style it yourself entirely!
 
 More information on theming Angular Material: https://material.angular.io/guide/theming
 
+### Styling UX Code Snippets - Highlight.js
+
+You can pass in any theme name (string, excluding the file extension ".css") to the input `codeTheme` on _any_ `ngx-gist` element on a single page which will apply the theme to that pages gists.
+
+You can find the available styles here: https://unpkg.com/browse/highlight.js@11.6.0/styles/
+
+Alternatively if you only want to use one style across the whole project or just apply to specific features, I recommend importing the styles directly. To do this install the `highlight.js` package and apply the style. Example below:
+
+```bash
+npm install highlight.js --save
+```
+
+```diff
+...
++ @import "highlight.js/styles/github.css";
+...
+```
+
 ### Core Packages
 
 Depending on how your project is set up, you may also need the following imports either in your `FeatureModule` for example or your root module (generally these are already imported in `AppModule` or similar, they are common features of Angular). These dependencies are needed for animating the Angular Material tabs click transition and making an HTTP request to GitHub to retrieve the remote gist information.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@proangular/ngx-gist",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "An Angular Material and HighlighJs styled display box for GitHub gist and local code snippets.",
   "author": "Pro Angular <webmaster@proangular.com>",
   "homepage": "https://www.proangular.com",

package.json

@@ -5,7 +5,9 @@ import { Component } from '@angular/core';
   template: `
     <footer [style.height]="height + 'px'">
       <a href="https://www.ProAngular.com" target="_blank">
-        <img src="assets/images/pro-angular-logo.png" />
+        <img
+          src="https://www.proangular.com/assets/images/pro-angular-logo-large.png"
+        />
       </a>
       <p>
         Copyright &copy; Pro Angular 2022

src/app/layout/footer.component.ts

@@ -6,15 +6,20 @@ import { Component } from '@angular/core';
     <mat-toolbar class="mat-elevation-z6">
       <mat-toolbar-row>
         <a class="logo" href="https://www.ProAngular.com" target="_blank">
-          <img src="assets/images/pro-angular-logo-full.png" />
+          <img
+            src="https://www.proangular.com/assets/images/pro-angular-logo-full.png"
+          />
         </a>
         <div class="github-link-container">
           <a
             href="https://github.com/ProAngular/ngx-gist"
             aria-label="GitHub Repo"
             target="_blank"
           >
-            <img class="git-hub" src="assets/images/git-hub.svg" />
+            <img
+              class="git-hub"
+              src="https://www.proangular.com/assets/images/git-hub.svg"
+            />
           </a>
         </div>
       </mat-toolbar-row>

src/app/layout/header.component.ts

@@ -44,7 +44,7 @@ import {
           target="_blank"
           [href]="'https://gist.github.com/' + gid"
         >
-          <mat-icon>link</mat-icon> Open Gist on GitHub
+          &#128279; Open Gist on GitHub
         </a>
       </mat-card-footer>
 

src/app/public/ngx-gist.component.ts

@@ -5,20 +5,17 @@ import { NgxGistService } from './ngx-gist.service';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GistFileFilterPipe } from './ngx-gist-file-filter.pipe';
-import { MatIconModule } from '@angular/material/icon';
 import { NgxGistLineNumbersService } from './ngx-gist-line-numbers.service';
 import { NgxGistThemeService } from './ngx-gist-theme.service';
 
 @NgModule({
   declarations: [NgxGistComponent, GistFileFilterPipe],
   imports: [
-    // Needs to be imported at root.
+    // Needs to be imported at root. See `README.md` for more info.
     // BrowserAnimationsModule,
-    CommonModule,
-    // Needs to be imported at root.
     // HttpClientModule,
+    CommonModule,
     MatCardModule,
-    MatIconModule,
     MatTabsModule,
   ],
   exports: [NgxGistComponent],

src/app/public/ngx-gist.module.ts

@@ -3,7 +3,7 @@
 // It's wise to import a prebuilt Material theme or custom theme at the root of
 // your project when using `@proangular/ngx-gist`.
 
-@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+@import "@angular/material/prebuilt-themes/deeppurple-amber.css";
 
 /* Alternative pre-built themes.
 @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@@ -18,4 +18,5 @@ body {
   background-color: #faf9f6;
 }
 
-@import "~highlight.js/styles/github.css";
+// Use this to apply a `highlight.js` theme globally
+// @import "highlight.js/styles/github.css";