before vue-hljs-with-line-number

assets/js/components/pages/edit.vue

@@ -3,7 +3,7 @@
 		v-if="!isLoading"
 		class="box p-3"
 	>
-		<tab-wrapper @tabActivated="tabActivated">
+		<tabs-group @tabActivated="tabActivated">
 			<tab-content title="Visual Editor">
 				<div class="editor mt-2">
 					<VueEditor
@@ -21,7 +21,7 @@
 					/>
 				</div>
 			</tab-content>
-		</tab-wrapper>
+		</tabs-group>
 		<button
 			class="btn btn-primary mt-3 mb-2"
 			@click="saveContent"
@@ -46,14 +46,14 @@ import { VueEditor } from 'vue3-editor'
 import hljs from 'highlightjs'
 import 'highlightjs/styles/dracula.css'
 
-import TabWrapper from '@/components/tabs/TabWrapper'
+import TabsGroup from '@/components/tabs/TabsGroup'
 import TabContent from '@/components/tabs/TabContent'
 
 export default {
 	name: 'PagesEdit',
 	components: {
 		VueEditor,
-		TabWrapper,
+		TabsGroup,
 		TabContent
 	},
 	data: () => ({

assets/js/components/pages/index.vue

@@ -23,6 +23,11 @@
 
 <script>
 import axios from 'axios'
+//import h from 'highlightjs'
+//import hi from 'highlightjs-line-numbers.js'
+
+//hi.highlightAll()
+//hi.initLineNumbersOnLoad()
 
 export default {
 	name: 'PagesDisplay',

assets/js/components/tabs/TabsGroup.vue

@@ -18,7 +18,7 @@
 import { ref, provide } from 'vue'
 
 export default {
-	name: 'TabWrapper',
+	name: 'TabsGroup',
 	setup(props, { slots }) {
 		const tabTitles = ref(slots.default()
 			.map((tab) => tab.props.title))

assets/styles/app.scss

@@ -70,8 +70,27 @@ $mango: #FF8040;
 
 .ql-syntax {
   background-color: #222222;
+  border: 1px solid #888;
+  border-left: 3px solid $primary;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: 15px;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  word-wrap: break-word;
 }
 
+pre span.hljs-tag::before, span.hljs-attr::before {
+  content: "xxx";
+  display: inline-block;
+}
+
+
 .wrapper {
   clear: both;
   position: sticky;