rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add code blocks

Browse source
This commit is contained in:
swve 2023-10-04 21:49:06 +02:00
parent 098c640052
commit 90a89bc5f5
5 changed files with 349 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

170
front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx
View file

@ -12,6 +12,18 @@ import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock";
import { OrderedList } from "@tiptap/extension-ordered-list";
import QuizBlock from "@components/Objects/Editor/Extensions/Quiz/QuizBlock";
// Lowlight
import { common, createLowlight } from 'lowlight'
const lowlight = createLowlight(common)
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
import python from 'highlight.js/lib/languages/python'
import java from 'highlight.js/lib/languages/java'
interface Editor {
content: string;
activity: any;
@ -20,6 +32,16 @@ interface Editor {
function Canva(props: Editor) {
const isEditable = false;
// Code Block Languages for Lowlight
lowlight.register('html', html)
lowlight.register('css', css)
lowlight.register('js', js)
lowlight.register('ts', ts)
lowlight.register('python', python)
lowlight.register('java', java)
const editor: any = useEditor({
editable: isEditable,
extensions: [
@ -55,8 +77,10 @@ function Canva(props: Editor) {
controls: true,
modestBranding: true,
}),
OrderedList.configure()
OrderedList.configure(),
CodeBlockLowlight.configure({
lowlight,
}),
],
@ -78,50 +102,118 @@ const CanvaWrapper = styled.div`
.ProseMirror {
h1 {
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}
h1 {
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}
h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
h4 {
font-size: 18px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 10px;
}
h4 {
font-size: 18px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 10px;
}
h5 {
font-size: 16px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 10px;
}
h5 {
font-size: 16px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 10px;
}
ul, ol {
padding: 0 1rem;
padding-left: 20px;
list-style-type: decimal;
}
ul, ol {
padding: 0 1rem;
padding-left: 20px;
list-style-type: decimal;
}
&:focus {
outline: none !important;
outline-style: none !important;
box-shadow: none !important;
}
&:focus {
outline: none !important;
outline-style: none !important;
box-shadow: none !important;
}
// Code Block
pre {
background: #0d0d0d;
border-radius: 0.5rem;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
.hljs-comment,
.hljs-quote {
color: #616161;
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #f98181;
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: #fbbc88;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #b9f18d;
}
.hljs-title,
.hljs-section {
color: #faf594;
}
.hljs-keyword,
.hljs-selector-tag {
color: #70cff8;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
}