LukeParke/sveltesociety.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltesociety.dev.git synced 2025-12-06 12:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add code syntax highlighting (hljs)

Browse Source
This commit is contained in:
Ambar Mutha
2021-09-09 14:37:57 +05:30
parent be73ba9f2a
commit 717a96590d
6 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@@ -5,6 +5,7 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "sveltesociety.dev",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"svelte-highlight": "^3.2.0" "svelte-highlight": "^3.2.0"
@@ -19,6 +20,7 @@
"eslint": "^7.22.0", "eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^3.2.0", "eslint-plugin-svelte3": "^3.2.0",
"highlight.js": "^11.2.0",
"jest": "^27.1.0", "jest": "^27.1.0",
"mdsvex": "^0.9.3", "mdsvex": "^0.9.3",
"prettier": "~2.2.1", "prettier": "~2.2.1",

1
package.json
View File

@@ -20,6 +20,7 @@
"eslint": "^7.22.0", "eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^3.2.0", "eslint-plugin-svelte3": "^3.2.0",
"highlight.js": "^11.2.0",
"jest": "^27.1.0", "jest": "^27.1.0",
"mdsvex": "^0.9.3", "mdsvex": "^0.9.3",
"prettier": "~2.2.1", "prettier": "~2.2.1",

0
src/routes/cheatsheet/highlight.css → src/lib/styles/highlight.css
View File

2
src/routes/cheatsheet/_CheatSheetCard.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import './highlight.css'; import '$styles/highlight.css';
import { HighlightSvelte } from 'svelte-highlight'; import { HighlightSvelte } from 'svelte-highlight';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';

4
src/routes/recipes/__layout.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
import { categories } from '$lib/stores/recipes'; import { categories } from '$lib/stores/recipes';
import '$styles/highlight.css';
export async function load({ fetch }) { export async function load({ fetch }) {
const res = await fetch('/recipes/recipes'); const res = await fetch('/recipes/recipes');
@@ -32,7 +33,8 @@
color: black; color: black;
border-left: 2px solid #ff3e01; border-left: 2px solid #ff3e01;
} }
.container :global(h2), .container :global(h3) { .container :global(h2),
.container :global(h3) {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }

9
svelte.config.js
View File

@@ -1,5 +1,6 @@
import adapter from '@sveltejs/adapter-static'; import adapter from '@sveltejs/adapter-static';
import { mdsvex } from 'mdsvex'; import { mdsvex, escapeSvelte } from 'mdsvex';
import hljs from 'highlight.js';
import path from 'path'; import path from 'path';
const extensions = [`.svelte`, '.md', `.mdx`, '.svx']; const extensions = [`.svelte`, '.md', `.mdx`, '.svx'];
@@ -14,6 +15,12 @@ const config = {
eventPage: './src/lib/layouts/EventPage.svelte', eventPage: './src/lib/layouts/EventPage.svelte',
recipe: './src/lib/layouts/Recipe.svelte', recipe: './src/lib/layouts/Recipe.svelte',
recipeCategory: './src/lib/layouts/RecipeCategory.svelte' recipeCategory: './src/lib/layouts/RecipeCategory.svelte'
},
highlight: {
highlighter: (code) => {
const highlighted = escapeSvelte(hljs.highlightAuto(code).value);
return `{@html \`<pre class="hljs"><code>${highlighted}</code></pre>\`}`;
}
} }
}) })
], ],