Skip to content

Commit 788e9e5

Browse files
ganatanganatan
committed
Add example-pris on frontend-angular
1 parent 59cdf9e commit 788e9e5

30 files changed

+1868
-0
lines changed

‎frontend-angular/package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend-angular/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@fortawesome/fontawesome-free": "6.7.1",
2929
"bootstrap": "5.3.3",
3030
"express": "4.21.1",
31+
"prismjs": "1.29.0",
3132
"rxjs": "7.8.1",
3233
"tslib": "2.8.1",
3334
"zone.js": "0.15.0"

‎frontend-angular/src/app/app.routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import { NotFoundComponent } from './features/not-found/not-found.component';
66
export const routes: Routes = [
77
{ path: '', component: HomeComponent, },
88

9+
{
10+
path: 'prism',
11+
loadComponent: () => import('./features/tutorials/example-prism/tutorial.component')
12+
.then(mod => mod.TutorialComponent)
13+
},
914
{
1015
path: 'continents',
1116
loadComponent: () => import('./features/continent/item.component')

‎frontend-angular/src/app/features/home/home.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,12 @@ export class HomeComponent {
7979
description: "Reactive & Template",
8080
link: '/forms'
8181
},
82+
{
83+
icon: "fa-solid fa-spell-check",
84+
name: "Prism",
85+
description: "Syntax highlighter",
86+
link: '/prism'
87+
},
8288
]
8389

8490
constructor(private seoService: SeoService) {

‎frontend-angular/src/app/features/tutorials/example-prism/prism/prism.component.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {
2+
Component,
3+
Input,
4+
Renderer2,
5+
ElementRef,
6+
Inject,
7+
PLATFORM_ID,
8+
AfterViewInit,
9+
forwardRef,
10+
} from '@angular/core';
11+
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
12+
import 'prismjs/prism';
13+
import 'prismjs/components/prism-typescript';
14+
import 'prismjs/components/prism-css';
15+
import 'prismjs/components/prism-javascript';
16+
import 'prismjs/components/prism-sql';
17+
import 'prismjs/components/prism-java';
18+
import 'prismjs/components/prism-git';
19+
import 'prismjs/components/prism-bash';
20+
import 'prismjs/components/prism-python';
21+
import 'prismjs/components/prism-json';
22+
import 'prismjs/components/prism-nginx';
23+
24+
declare const Prism: any;
25+
26+
@Component({
27+
selector: 'app-prism-block',
28+
standalone: true,
29+
template: '',
30+
providers: [
31+
{
32+
provide: NG_VALUE_ACCESSOR,
33+
useExisting: forwardRef(() => PrismComponent),
34+
multi: true,
35+
},
36+
],
37+
})
38+
export class PrismComponent implements ControlValueAccessor, AfterViewInit {
39+
@Input() debug = false;
40+
@Input() language = '';
41+
@Input() code = '';
42+
43+
private preNode: Node;
44+
private codeNode: Node;
45+
public selectedValue = 0;
46+
47+
propagateChange: (value: any) => void = () => {
48+
// Default no-op implementation
49+
};
50+
51+
constructor(
52+
@Inject(PLATFORM_ID) private platformId: object,
53+
private renderer: Renderer2,
54+
private elementRef: ElementRef
55+
) {
56+
this.preNode = this.renderer.createElement('pre');
57+
this.codeNode = this.renderer.createElement('code');
58+
}
59+
60+
writeValue(obj: number): void {
61+
this.selectedValue = obj;
62+
this.update();
63+
}
64+
65+
registerOnChange(fn: (value: any) => void): void {
66+
this.propagateChange = fn;
67+
}
68+
69+
registerOnTouched(fn: () => void): void {
70+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
71+
const _ignored = fn;
72+
}
73+
74+
ngAfterViewInit(): void {
75+
if (!this.debug) {
76+
this.update();
77+
}
78+
}
79+
80+
update(): void {
81+
this.preNode = this.renderer.createElement('pre');
82+
this.codeNode = this.renderer.createElement('code');
83+
this.renderer.addClass(this.codeNode, 'language-' + this.language);
84+
this.renderer.appendChild(this.elementRef.nativeElement, this.preNode);
85+
this.renderer.appendChild(this.preNode, this.codeNode);
86+
this.codeNode.textContent = this.code;
87+
Prism.highlightElement(this.codeNode);
88+
}
89+
}

‎frontend-angular/src/app/features/tutorials/example-prism/tutorial.component.css‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/* PrismJS 1.29.0
2+
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+armasm+arturo+asciidoc+aspnet+asm6502+asmatmel+autohotkey+autoit+avisynth+avro-idl+awk+bash+basic+batch+bbcode+bbj+bicep+birb+bison+bnf+bqn+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+cilkc+cilkcpp+clojure+cmake+cobol+coffeescript+concurnas+csp+cooklang+coq+crystal+css-extras+csv+cue+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gap+gcode+gdscript+gedcom+gettext+gherkin+git+glsl+gn+linker-script+go+go-module+gradle+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+hoon+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keepalived+keyman+kotlin+kumir+kusto+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+magma+makefile+markdown+markup-templating+mata+matlab+maxscript+mel+mermaid+metafont+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+odin+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plant-uml+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+cshtml+jsx+tsx+reason+regex+rego+renpy+rescript+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+stata+iecst+stylus+supercollider+swift+systemd+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+tremor+turtle+twig+typescript+typoscript+unrealscript+uorazor+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+web-idl+wgsl+wiki+wolfram+wren+xeora+xml-doc+xojo+xquery+yaml+yang+zig */
3+
code[class*=language-],
4+
pre[class*=language-] {
5+
color: #000;
6+
background: 0 0;
7+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
8+
font-size: 1em;
9+
text-align: left;
10+
white-space: pre;
11+
word-spacing: normal;
12+
word-break: normal;
13+
word-wrap: normal;
14+
line-height: 1.5;
15+
-moz-tab-size: 4;
16+
-o-tab-size: 4;
17+
tab-size: 4;
18+
-webkit-hyphens: none;
19+
-moz-hyphens: none;
20+
-ms-hyphens: none;
21+
hyphens: none
22+
}
23+
24+
pre[class*=language-] {
25+
position: relative;
26+
margin: .5em 0;
27+
overflow: visible;
28+
padding: 1px
29+
}
30+
31+
pre[class*=language-]>code {
32+
position: relative;
33+
z-index: 1;
34+
border-left: 10px solid #358ccb;
35+
box-shadow: -1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf;
36+
background-color: #fdfdfd;
37+
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, .04) 50%);
38+
background-size: 3em 3em;
39+
background-origin: content-box;
40+
background-attachment: local
41+
}
42+
43+
code[class*=language-] {
44+
max-height: inherit;
45+
height: inherit;
46+
padding: 0 1em;
47+
display: block;
48+
overflow: auto
49+
}
50+
51+
:not(pre)>code[class*=language-],
52+
pre[class*=language-] {
53+
background-color: #fdfdfd;
54+
-webkit-box-sizing: border-box;
55+
-moz-box-sizing: border-box;
56+
box-sizing: border-box;
57+
margin-bottom: 1em
58+
}
59+
60+
:not(pre)>code[class*=language-] {
61+
position: relative;
62+
padding: .2em;
63+
border-radius: .3em;
64+
color: #c92c2c;
65+
border: 1px solid rgba(0, 0, 0, .1);
66+
display: inline;
67+
white-space: normal
68+
}
69+
70+
pre[class*=language-]:after,
71+
pre[class*=language-]:before {
72+
content: '';
73+
display: block;
74+
position: absolute;
75+
bottom: .75em;
76+
left: .18em;
77+
width: 40%;
78+
height: 20%;
79+
max-height: 13em;
80+
box-shadow: 0 13px 8px #979797;
81+
-webkit-transform: rotate(-2deg);
82+
-moz-transform: rotate(-2deg);
83+
-ms-transform: rotate(-2deg);
84+
-o-transform: rotate(-2deg);
85+
transform: rotate(-2deg)
86+
}
87+
88+
pre[class*=language-]:after {
89+
right: .75em;
90+
left: auto;
91+
-webkit-transform: rotate(2deg);
92+
-moz-transform: rotate(2deg);
93+
-ms-transform: rotate(2deg);
94+
-o-transform: rotate(2deg);
95+
transform: rotate(2deg)
96+
}
97+
98+
.token.block-comment,
99+
.token.cdata,
100+
.token.comment,
101+
.token.doctype,
102+
.token.prolog {
103+
color: #7d8b99
104+
}
105+
106+
.token.punctuation {
107+
color: #5f6364
108+
}
109+
110+
.token.boolean,
111+
.token.constant,
112+
.token.deleted,
113+
.token.function-name,
114+
.token.number,
115+
.token.property,
116+
.token.symbol,
117+
.token.tag {
118+
color: #c92c2c
119+
}
120+
121+
.token.attr-name,
122+
.token.builtin,
123+
.token.char,
124+
.token.function,
125+
.token.inserted,
126+
.token.selector,
127+
.token.string {
128+
color: #2f9c0a
129+
}
130+
131+
.token.entity,
132+
.token.operator,
133+
.token.url,
134+
.token.variable {
135+
color: #a67f59;
136+
background: rgba(255, 255, 255, .5)
137+
}
138+
139+
.token.atrule,
140+
.token.attr-value,
141+
.token.class-name,
142+
.token.keyword {
143+
color: #1990b8
144+
}
145+
146+
.token.important,
147+
.token.regex {
148+
color: #e90
149+
}
150+
151+
.language-css .token.string,
152+
.style .token.string {
153+
color: #a67f59;
154+
background: rgba(255, 255, 255, .5)
155+
}
156+
157+
.token.important {
158+
font-weight: 400
159+
}
160+
161+
.token.bold {
162+
font-weight: 700
163+
}
164+
165+
.token.italic {
166+
font-style: italic
167+
}
168+
169+
.token.entity {
170+
cursor: help
171+
}
172+
173+
.token.namespace {
174+
opacity: .7
175+
}
176+
177+
@media screen and (max-width:767px) {
178+
179+
pre[class*=language-]:after,
180+
pre[class*=language-]:before {
181+
bottom: 14px;
182+
box-shadow: none
183+
}
184+
}
185+
186+
pre[class*=language-].line-numbers.line-numbers {
187+
padding-left: 0
188+
}
189+
190+
pre[class*=language-].line-numbers.line-numbers code {
191+
padding-left: 3.8em
192+
}
193+
194+
pre[class*=language-].line-numbers.line-numbers .line-numbers-rows {
195+
left: 0
196+
}
197+
198+
pre[class*=language-][data-line] {
199+
padding-top: 0;
200+
padding-bottom: 0;
201+
padding-left: 0
202+
}
203+
204+
pre[data-line] code {
205+
position: relative;
206+
padding-left: 4em
207+
}
208+
209+
pre .line-highlight {
210+
margin-top: 0
211+
}

0 commit comments

Comments
 (0)