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;

package.json

@@ -37,6 +37,7 @@
         "eslint-plugin-vue": "^8.7.1",
         "fork-awesome": "^1.2.0",
         "highlightjs": "^9.16.2",
+        "highlightjs-line-numbers.js": "^2.8.0",
         "husky": "^7.0.4",
         "less": "^4.1.2",
         "marked": "^4.0.15",

yarn.lock

@@ -3081,6 +3081,11 @@ highlight.js@^10.3.2:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+highlightjs-line-numbers.js@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/highlightjs-line-numbers.js/-/highlightjs-line-numbers.js-2.8.0.tgz#479ea8cff0c31fadc1578a66fa03e38b801f9ca6"
+  integrity sha512-TEf1gw0c8mb8nan0QwliqS7obT4cpUd9hzsGzsZLweteNnWea/VIqy5/aQqsa5wnz9lnvmtAkS1ZtDTjB/goYQ==
+
 highlightjs@^9.16.2:
   version "9.16.2"
   resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.16.2.tgz#07ea6cc7c93340fc440734fb7abf28558f1f0fe1"