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

4
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';
@@ -49,7 +49,7 @@
.title { .title {
background-color: var(--secondary); background-color: var(--secondary);
padding: var(--s-4); padding: var(--s-4);
color: var(--white); color: var(--white);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

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

@@ -1,45 +1,47 @@
<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');
const recipeCategories = await res.json(); const recipeCategories = await res.json();
if (!res.ok) { if (!res.ok) {
return { return {
status: res.status, status: res.status,
error: new Error() error: new Error()
}; };
} }
categories.set(recipeCategories); categories.set(recipeCategories);
return { props: { categories: recipeCategories } }; return { props: { categories: recipeCategories } };
} }
</script> </script>
<svelte:head> <svelte:head>
<title>Recipes - Svelte Society</title> <title>Recipes - Svelte Society</title>
</svelte:head> </svelte:head>
<div class="container"> <div class="container">
<slot /> <slot />
</div> </div>
<style> <style>
:global(article blockquote) { :global(article blockquote) {
background: rgba(255, 62, 1, 0.2); background: rgba(255, 62, 1, 0.2);
border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px;
color: black; color: black;
border-left: 2px solid #ff3e01; border-left: 2px solid #ff3e01;
} }
.container :global(h2), .container :global(h3) { .container :global(h2),
margin-top: 2rem; .container :global(h3) {
margin-bottom: 1.25rem; margin-top: 2rem;
} margin-bottom: 1.25rem;
.container :global(p) { }
margin-bottom: 1.25rem; .container :global(p) {
} margin-bottom: 1.25rem;
.container :global(li) { }
margin-bottom: 1.1rem; .container :global(li) {
} margin-bottom: 1.1rem;
}
</style> </style>

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>\`}`;
}
} }
}) })
], ],