tracer
/
Spookie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

before vue-hljs-with-line-number

This commit is contained in:
tracer 2022-05-13 17:58:13 +02:00
parent 8a4a694b86
commit 8fab301419
6 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/components/pages/edit.vue
View File

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

5
assets/js/components/pages/index.vue
View File

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

2
assets/js/components/tabs/TabWrapper.vue → assets/js/components/tabs/TabsGroup.vue
View File

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

19
assets/styles/app.scss
View File

@ -70,8 +70,27 @@ $mango: #FF8040;
.ql-syntax { .ql-syntax {
background-color: #222222; 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 { .wrapper {
clear: both; clear: both;
position: sticky; position: sticky;

1
package.json
View File

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

5
yarn.lock
View File

@ -3081,6 +3081,11 @@ highlight.js@^10.3.2:
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== 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: highlightjs@^9.16.2:
version "9.16.2" version "9.16.2"
resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.16.2.tgz#07ea6cc7c93340fc440734fb7abf28558f1f0fe1" resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.16.2.tgz#07ea6cc7c93340fc440734fb7abf28558f1f0fe1"