-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #254 from valerymelou/feature/shiki
feat: replace prismjs with shiki
- Loading branch information
Showing
10 changed files
with
247 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| @if (code) { | ||
| @if (code.split(' ').length === 1) { | ||
| <div [innerHTML]="highlightedCode" class="code inline-flex"></div> | ||
| } @else { | ||
| <div class="group relative"> | ||
| <span | ||
| class="absolute right-2 top-2 text-xs text-slate-400 opacity-100 transition-all duration-300 ease-in-out group-hover:opacity-0" | ||
| >{{ language }}</span | ||
| > | ||
| <button | ||
| class="absolute right-2 top-2 flex h-10 min-w-10 items-center justify-center rounded-lg border border-slate-400 bg-slate-100 text-slate-400 opacity-0 transition-all duration-300 ease-in-out group-hover:opacity-100 dark:border-slate-400 dark:bg-slate-900" | ||
| aria-label="Copy" | ||
| [ngClass]="{ 'px-4': copied }" | ||
| (click)="copy()" | ||
| > | ||
| @if (copied) { | ||
| <span class="text-sm">Copied</span> | ||
| <ng-icon name="bootstrapCheck" size="20"></ng-icon> | ||
| } @else { | ||
| <ng-icon name="bootstrapCopy"></ng-icon> | ||
| } | ||
| </button> | ||
| <div | ||
| [innerHTML]="highlightedCode" | ||
| class="code dark:border-secondary-dark overflow-x-auto rounded-md border border-slate-100" | ||
| ></div> | ||
| </div> | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| :host { | ||
| display: inline-block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| pre { | ||
| padding: 24px; | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .inline-flex { | ||
| pre { | ||
| padding: 0 6px; | ||
| } | ||
| } | ||
|
|
||
| html.dark .shiki, | ||
| html.dark .shiki span { | ||
| color: var(--shiki-dark) !important; | ||
| background-color: var(--shiki-dark-bg) !important; | ||
| /* Optional, if you also want font styles */ | ||
| font-style: var(--shiki-dark-font-style) !important; | ||
| font-weight: var(--shiki-dark-font-weight) !important; | ||
| text-decoration: var(--shiki-dark-text-decoration) !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { CodeComponent } from './code.component'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { WINDOW_TOKEN } from '@valerymelou/common/browser'; | ||
|
|
||
| describe('CodeComponent', () => { | ||
| let component: CodeComponent; | ||
| let fixture: ComponentFixture<CodeComponent>; | ||
| const code = '```html\n<h1>Hello World</h1><div>This is a test</div>\n'; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [CodeComponent], | ||
| providers: [ | ||
| { | ||
| provide: WINDOW_TOKEN, | ||
| useValue: { | ||
| navigator: { clipboard: { writeText: () => Promise.resolve() } }, | ||
| }, | ||
| }, | ||
| ], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(CodeComponent); | ||
| component = fixture.componentInstance; | ||
| component.code = code; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should copy the code to the clipboard', () => { | ||
| const window = TestBed.inject(WINDOW_TOKEN); | ||
| const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText'); | ||
| const button = fixture.debugElement.query(By.css('button')); | ||
|
|
||
| button.triggerEventHandler('click'); | ||
| expect(writeTextSpy).toHaveBeenCalledWith( | ||
| code.replace('```html\n', '').replace('\n```', ''), | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; | ||
| import { Component, Inject, Input, ViewEncapsulation } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
|
|
||
| import { NgIconComponent, provideIcons } from '@ng-icons/core'; | ||
| import { bootstrapCopy, bootstrapCheck } from '@ng-icons/bootstrap-icons'; | ||
| import { bundledLanguages } from 'shiki/langs'; | ||
| import { codeToHtml } from 'shiki'; | ||
| import { WINDOW_TOKEN } from '@valerymelou/common/browser'; | ||
|
|
||
| @Component({ | ||
| selector: 'ui-code', | ||
| standalone: true, | ||
| imports: [CommonModule, NgIconComponent], | ||
| templateUrl: './code.component.html', | ||
| styleUrls: ['./code.component.scss'], | ||
| encapsulation: ViewEncapsulation.None, | ||
| viewProviders: [provideIcons({ bootstrapCopy, bootstrapCheck })], | ||
| }) | ||
| export class CodeComponent { | ||
| @Input() | ||
| set code(value: string) { | ||
| this._code = value; | ||
| this.highlight(); | ||
| } | ||
|
|
||
| get code(): string { | ||
| return this._code; | ||
| } | ||
|
|
||
| @Input() language!: string; | ||
| highlightedCode!: SafeHtml; | ||
|
|
||
| private _code!: string; | ||
| copied = false; | ||
|
|
||
| constructor( | ||
| private sanitizer: DomSanitizer, | ||
| @Inject(WINDOW_TOKEN) private window: Window, | ||
| ) {} | ||
|
|
||
| copy(): void { | ||
| this.window.navigator.clipboard.writeText(this.code).then(() => { | ||
| this.copied = true; | ||
| setTimeout(() => { | ||
| this.copied = false; | ||
| }, 3000); | ||
| }); | ||
| } | ||
|
|
||
| highlight(): void { | ||
| this.language = | ||
| this.language ?? this.code.split('\n')[0].replace('```', ''); | ||
|
|
||
| if (this.language in bundledLanguages) { | ||
| this._code = this.code.replace('```' + this.language + '\n', ''); | ||
| } else { | ||
| this.language = 'javascript'; | ||
| } | ||
|
|
||
| codeToHtml(this.code, { | ||
| lang: this.language, | ||
| themes: { | ||
| light: 'catppuccin-latte', | ||
| dark: 'material-theme-ocean', | ||
| }, | ||
| transformers: [ | ||
| { | ||
| pre(node) { | ||
| this.addClassToHast(node, 'overflow-x-auto'); | ||
| }, | ||
| }, | ||
| ], | ||
| }).then((highlightedCode) => { | ||
| this.highlightedCode = | ||
| this.sanitizer.bypassSecurityTrustHtml(highlightedCode); | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.