before vue-hljs-with-line-number
This commit is contained in:
parent
8a4a694b86
commit
8fab301419
|
@ -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: () => ({
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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))
|
|
@ -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;
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue