Skip to content

feat: integrate shiki for code formatting #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions libs/blog-bff/articles/api/src/lib/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ app.get('/:slug', async (c) => {
const client = new WpPosts(c.var.createWPClient({ namespace: 'al/v1' }));

const result = await client.getBySlug(slug);

return c.json(toArticle(result.data));
});

Expand Down
3 changes: 1 addition & 2 deletions libs/blog-bff/articles/api/src/lib/mappers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {

import { WPPostDetailsDto, WPPostDto } from './dtos';
import {
crayonCodeRewriter,
modifyImages,
modifyLinks,
removeEmptyParagraphs,
Expand Down Expand Up @@ -71,6 +70,7 @@ export const toArticle = (dto?: WPPostDetailsDto): Article => {
allowedClasses: {
blockquote: ['twitter-tweet'],
pre: ['lang:*'],
code: ['language-*'],
div: ['crayon-line', 'crayon-syntax'],
},
transformTags: {
Expand All @@ -81,7 +81,6 @@ export const toArticle = (dto?: WPPostDetailsDto): Article => {

rewriteHTML(
wpCodeRewriter,
crayonCodeRewriter,
removeEmptyParagraphs,
modifyLinks,
modifyImages,
Expand Down
85 changes: 50 additions & 35 deletions libs/blog-bff/articles/api/src/lib/utils.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
import { createHighlighterCore } from 'shiki/core';
import { loadWasm } from 'shiki/engine/oniguruma';
import type { CheerioAPI } from 'cheerio';
import hljs from 'highlight.js';

const DEFAULT_LANGUAGE_SUBSET = ['typescript', 'html', 'css', 'scss', 'json'];
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
await loadWasm(import('shiki/dist/onig.wasm'));

const highlighter = await createHighlighterCore({
themes: [
import('shiki/themes/github-dark.mjs'), // dark mode
import('shiki/themes/github-light.mjs'), // light mode
],
langs: [
import('shiki/langs/shell.mjs'),
import('shiki/langs/bash.mjs'),
import('shiki/langs/json.mjs'),
import('shiki/langs/typescript.mjs'),
import('shiki/langs/angular-ts.mjs'),
import('shiki/langs/angular-html.mjs'),
],
});

const themes = highlighter.getLoadedThemes();

type RewriteAdapter = ($: CheerioAPI) => void;

Expand All @@ -18,7 +38,7 @@ export const rewriteHTML = (...adapters: RewriteAdapter[]) => {
* @param $
*/
export const wpCodeRewriter: RewriteAdapter = ($) => {
$('pre').each((index, element) => {
$('pre').each((_, element) => {
const code = $(element).text();

// Check if the content is already wrapped in a <code> block
Expand All @@ -29,46 +49,41 @@ export const wpCodeRewriter: RewriteAdapter = ($) => {
// Also add `hljs` class to make it apply hljs styling schema
if (!hasCodeBlock) {
$(element).html(`<code class="hljs">${code}</code>`);
} else {
$(element).children('code').addClass('hljs');
}

// Detect the language and apply syntax highlighting
const highlightedCode = hljs.highlightAuto(
code,
DEFAULT_LANGUAGE_SUBSET,
).value;
const classAttr = $(element).find('code').attr()['class'];
const classes = classAttr.split(' ');
const codeLanguageClass = classes.find((cl) =>
/^language-[\w-]+$/.test(cl),
);

// Replace the content of the <code> block with the highlighted code
$(element).children('code').html(highlightedCode);
});
};
let language: string;

/**
* Rewrites code blocks generated by `crayon` plugin and applies HLJS styling
* @param $
*/
export const crayonCodeRewriter: RewriteAdapter = ($) => {
$('.crayon-syntax').each((_, element) => {
const $element = $(element);
let code = '';
if (codeLanguageClass) {
language = codeLanguageClass.replace('language-', '');
} else {
language = 'angular-ts';
}

// Extract code from Crayon lines
$element.find('.crayon-line').each((_, line) => {
code += $(line).text() + '\n';
});
if (language === 'typescript' || language === 'ts') {
language = 'angular-ts';
}

// Detect the language and apply syntax highlighting
const highlightedCode = hljs.highlightAuto(
code,
DEFAULT_LANGUAGE_SUBSET,
).value;
if (language === 'html') {
language = 'angular-html';
}

// Create a new <pre><code> element with the highlighted code
const preCodeBlock = `<pre><code class="hljs">${highlightedCode}</code></pre>`;
const highlightedCode = highlighter.codeToHtml(code, {
theme: highlighter.getLoadedThemes()[0],
themes: {
dark: themes[0],
light: themes[1],
},
lang: language,
});

// Replace the entire crayon-syntax element with the new preCodeBlock
$element.replaceWith(preCodeBlock);
// Replace the content of the <code> block with the highlighted code
$(element).replaceWith(highlightedCode);
});
};

Expand Down
3 changes: 2 additions & 1 deletion libs/blog-bff/articles/api/tsconfig.lib.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"target": "ESNext",
"module": "ESNext",
"outDir": "../../../../dist/out-tsc",
"declaration": true,
"types": ["node", "@cloudflare/workers-types"],
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
@use 'highlight.js/styles/github-dark.min.css';

@mixin heading-styles {
padding-bottom: 0.3rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid #5c93bb2b;
margin-top: 1.6rem;
}

@media (prefers-color-scheme: dark) {
.shiki,
.shiki span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}

.blog-article-content {
pre.shiki {
@apply mb-4 overflow-x-auto rounded-2xl p-4;
}

h1 {
@apply text-3xl;
@include heading-styles;
Expand Down Expand Up @@ -37,16 +50,13 @@
@apply al-link;
}

code.hljs {
@apply my-4 rounded-2xl p-6;
}

code:not(.hljs) {
code:not(pre code) {
padding: 0.2em 0.4em;
background: #215aa012;
background: #2e2f3b;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 600;
@apply rounded-md;
}

strong {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"prettier-plugin-organize-attributes": "^1.0.0",
"rxjs": "~7.8.1",
"sanitize-html": "^2.13.0",
"shiki": "^1.22.2",
"stylelint": "^16.3.1",
"tailwind-merge": "^2.3.0",
"tslib": "^2.6.1",
Expand Down
Loading