@christophhu/ngx-code-representation
v20.3.1
Published
Library for Angular to present code.
Readme
Ngx-code-representation
Demo
Description
This repository contains an Angular 20 demo that showcases the ngx-code-representation library. ngx-code-representation provides a representation of code with highlightjs for Angular apps. It’s easy to customize—sizes, colors, and behavior—to match your application’s design.
Frameworks and Languages
Installation
To run this project, you need to have Node.js installed on your machine. Clone the repository and run the following commands:
npm install @christophhu/ngx-code-representationUsage
Import the DatatableComponent in the app.ts.
import { NgxCodeRepresentationComponent } from '@christophhu/ngx-code-representation';
@NgModule({
imports: [
NgxCodeRepresentationComponent,
...
]
...
})export class App {
...
gist: gist = {
"name": "border-blob",
"type": "shape",
"version": "1.0.0",
"description": "A blob shape with a border",
"file": [
{
"filename": "border-blob.html",
"language": "html",
"code": "<div class=\"card\">\n<div class=\"bg\">\n<\/div>\n<div class=\"blob\"><\/div></div>"
},
{
"filename": "border-blob.css",
"language": "css",
"code": ".card {\r\n position: relative;\r\n width: 200px;\r\n height: 250px;\r\n border-radius: 14px;\r\n z-index: 1111;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;\r\n ;\r\n}\r\n\r\n.bg {\r\n position: absolute;\r\n top: 5px;\r\n left: 5px;\r\n width: 190px;\r\n height: 240px;\r\n z-index: 2;\r\n background: rgba(255, 255, 255, .95);\r\n backdrop-filter: blur(24px);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n outline: 2px solid white;\r\n}\r\n\r\n.blob {\r\n position: absolute;\r\n z-index: 1;\r\n top: 50%;\r\n left: 50%;\r\n width: 150px;\r\n height: 150px;\r\n border-radius: 50%;\r\n background-color: #ff0000;\r\n opacity: 1;\r\n filter: blur(12px);\r\n animation: blob-bounce 5s infinite ease;\r\n}\r\n\r\n@keyframes blob-bounce {\r\n 0% {\r\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\r\n }\r\n\r\n 25% {\r\n transform: translate(-100%, -100%) translate3d(100%, 0, 0);\r\n }\r\n\r\n 50% {\r\n transform: translate(-100%, -100%) translate3d(100%, 100%, 0);\r\n }\r\n\r\n 75% {\r\n transform: translate(-100%, -100%) translate3d(0, 100%, 0);\r\n }\r\n\r\n 100% {\r\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\r\n }\r\n}\r\n"
}
],
"image_base64": "data:image/png;base64,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"
}Then, you can use the <ngx-code-representation> component in your HTML templates as shown below:
<ngx-code-representation [files]="files"></ngx-code-representation>In der index.html Datei, fügen Sie die Highlight.js CSS und JS Dateien hinzu:
!doctype html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github-dark.min.css" />
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
</head>
...
</html>import { provideHighlightOptions } from 'ngx-highlightjs'
import { provideHttpClient } from '@angular/common/http'
export const appConfig: ApplicationConfig = {
providers: [
provideHighlightOptions({
coreLibraryLoader: () => import('highlight.js/lib/core'),
languages: {
typescript: () => import('highlight.js/lib/languages/typescript'),
css: () => import('highlight.js/lib/languages/css'),
xml: () => import('highlight.js/lib/languages/xml')
},
// https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/
themePath: 'assets/style/github-dark.css'
}),
provideHttpClient()
]
};License
This project is licensed under the MIT License.
The MIT License (MIT) Copyright © 2025
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
