add something broken

examples/Components/App/style.scss

@@ -41,58 +41,6 @@
 
       code {
         display: block;
-
-        .hljs-comment,
-        .hljs-quote {
-          color: #999999;
-        }
-
-        .hljs-variable,
-        .hljs-template-variable,
-        .hljs-attribute,
-        .hljs-tag,
-        .hljs-name,
-        .hljs-regexp,
-        .hljs-link,
-        .hljs-name,
-        .hljs-selector-id,
-        .hljs-selector-class {
-          color: #f2777a;
-        }
-
-        .hljs-number,
-        .hljs-meta,
-        .hljs-built_in,
-        .hljs-builtin-name,
-        .hljs-literal,
-        .hljs-type,
-        .hljs-params {
-          color: #f99157;
-        }
-
-        .hljs-string,
-        .hljs-symbol,
-        .hljs-bullet {
-          color: #99cc99;
-        }
-
-        .hljs-title,
-        .hljs-section {
-          color: #ffcc66;
-        }
-
-        .hljs-keyword,
-        .hljs-selector-tag {
-          color: #6699cc;
-        }
-
-        .hljs-emphasis {
-          font-style: italic;
-        }
-
-        .hljs-strong {
-          font-weight: 700;
-        }
       }
     }
 

examples/Components/Routes/CodeHighlighting/index.vue

@@ -69,4 +69,73 @@ export default {
 		}
 	},
 }
-</script>
+</script>
+
+<style lang="scss">
+
+pre {
+	&::before {
+		content: attr(data-language);
+		text-transform: uppercase;
+		display: block;
+		text-align: right;
+		font-weight: bold;
+		font-size: 0.6rem;
+	}
+
+	code {
+
+		.hljs-comment,
+		.hljs-quote {
+			color: #999999;
+		}
+
+		.hljs-variable,
+		.hljs-template-variable,
+		.hljs-attribute,
+		.hljs-tag,
+		.hljs-name,
+		.hljs-regexp,
+		.hljs-link,
+		.hljs-name,
+		.hljs-selector-id,
+		.hljs-selector-class {
+			color: #f2777a;
+		}
+
+		.hljs-number,
+		.hljs-meta,
+		.hljs-built_in,
+		.hljs-builtin-name,
+		.hljs-literal,
+		.hljs-type,
+		.hljs-params {
+			color: #f99157;
+		}
+
+		.hljs-string,
+		.hljs-symbol,
+		.hljs-bullet {
+			color: #99cc99;
+		}
+
+		.hljs-title,
+		.hljs-section {
+			color: #ffcc66;
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag {
+			color: #6699cc;
+		}
+
+		.hljs-emphasis {
+			font-style: italic;
+		}
+
+		.hljs-strong {
+			font-weight: 700;
+		}
+	}
+}
+</style>

packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js

@@ -43,6 +43,152 @@ export default class CodeBlockHighlightNode extends Node {
 
 	get plugins() {
 		return [
+			// new Plugin({
+			// 	state: {
+			// 		init(_, { doc }) {
+			// 			const decorations = []
+
+			// 			const blocks = findBlockNodes(doc)
+			// 				.filter(item => item.node.type.name === 'code_block')
+
+			// 			const flatten = list => list.reduce(
+			// 					(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
+			// 			)
+
+			// 			function parseNodes(nodes, className = []) {
+			// 				return nodes.map(node => {
+
+			// 					const classes = [
+			// 						...className,
+			// 						...node.properties ? node.properties.className : [],
+			// 					]
+
+			// 					if (node.children) {
+			// 						return parseNodes(node.children, classes)
+			// 					}
+
+			// 					return {
+			// 						text: node.value,
+			// 						classes,
+			// 					}
+			// 				})
+			// 			}
+
+			// 			blocks.forEach(block => {
+			// 				let startPos = block.pos + 1
+			// 				const nodes = low.highlightAuto(block.node.textContent).value
+
+			// 				flatten(parseNodes(nodes))
+			// 					.map(node => {
+			// 						const from = startPos
+			// 						const to = from + node.text.length
+
+			// 						startPos = to
+
+			// 						return {
+			// 							...node,
+			// 							from,
+			// 							to,
+			// 						}
+			// 					})
+			// 					.forEach(node => {
+			// 						const decoration = Decoration.inline(node.from, node.to, {
+			// 							class: node.classes.join(' '),
+			// 						})
+			// 						decorations.push(decoration)
+			// 					})
+			// 			})
+
+			// 			return DecorationSet.create(doc, decorations)
+			// 		},
+			// 		apply(tr, set) {
+			// 			return set.map(tr.mapping, tr.doc)
+			// 		},
+			// 	},
+			// 	props: {
+			// 		decorations(state) {
+			// 			return this.getState(state)
+			// 		},
+			// 	},
+			// }),
+
+			// new Plugin({
+			// 	state: {
+			// 		init(_, { doc }) {
+			// 			const decorations = []
+
+			// 			const blocks = findBlockNodes(doc)
+			// 				.filter(item => item.node.type.name === 'code_block')
+
+			// 			// console.log({blocks})
+
+			// 			const flatten = list => list.reduce(
+			// 					(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
+			// 			)
+
+			// 			function parseNodes(nodes, className = []) {
+			// 				return nodes.map(node => {
+
+			// 					const classes = [
+			// 						...className,
+			// 						...node.properties ? node.properties.className : [],
+			// 					]
+
+			// 					if (node.children) {
+			// 						return parseNodes(node.children, classes)
+			// 					}
+
+			// 					return {
+			// 						text: node.value,
+			// 						classes,
+			// 					}
+			// 				})
+			// 			}
+
+			// 			blocks.forEach(block => {
+			// 				let startPos = block.pos + 1
+			// 				const hightlight = low.highlightAuto(block.node.textContent)
+			// 				const nodes = hightlight.value
+
+			// 				decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+			// 					'data-language': hightlight.language,
+			// 				}))
+
+			// 				flatten(parseNodes(nodes))
+			// 					.map(node => {
+			// 						const from = startPos
+			// 						const to = from + node.text.length
+
+			// 						startPos = to
+
+			// 						return {
+			// 							...node,
+			// 							from,
+			// 							to,
+			// 						}
+			// 					})
+			// 					.forEach(node => {
+			// 						const decoration = Decoration.inline(node.from, node.to, {
+			// 							class: node.classes.join(' '),
+			// 						})
+			// 						decorations.push(decoration)
+			// 					})
+			// 			})
+
+			// 			return DecorationSet.create(doc, decorations)
+			// 		},
+			// 		apply(tr, set) {
+			// 			return set.map(tr.mapping, tr.doc)
+			// 		},
+			// 	},
+			// 	props: {
+			// 		decorations(state) {
+			// 			console.log(this.getState(state))
+			// 			return this.getState(state)
+			// 		},
+			// 	},
+			// }),
+
 			new Plugin({
 				props: {
 					decorations({ doc }) {
@@ -76,7 +222,12 @@ export default class CodeBlockHighlightNode extends Node {
 
 						blocks.forEach(block => {
 							let startPos = block.pos + 1
-							const nodes = low.highlightAuto(block.node.textContent).value
+							const hightlight = low.highlightAuto(block.node.textContent)
+							const nodes = hightlight.value
+
+							decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+								'data-language': hightlight.language,
+							}))
 
 							flatten(parseNodes(nodes))
 								.map(node => {