8000 code highlight is ok with a bug.(must import style in detail page, no… · pycoder404/blog-vue@61c9cc0 · GitHub
[go: up one dir, main page]
Skip to content

Commit 61c9cc0

Browse files
pycoder404py 8000 coder404
committed
code highlight is ok with a bug.(must import style in detail page, not in main.js)
1 parent cec45ee commit 61c9cc0

File tree

6 files changed

+30
-16
lines changed

6 files changed

+30
-16
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"node-sass": "^7.0.1",
2121
"sass-loader": "^12.6.0",
2222
"vue": "^3.2.13",
23+
"vue-loader": "^17.0.0",
2324
"vue-router": "^4.0.14"
2425
},
2526
"devDependencies": {

‎src/layout/components/MainHeader.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
<el-link href="/">HOME</el-link>
3434
</el-menu-item>
3535
<el-menu-item index="2">
36-
<el-link href="/#/article/list">LIST</el-link>
36+
<el-link href="/article/list">LIST</el-link>
3737
</el-menu-item>
3838
<el-menu-item index="3">
39-
<el-link href="/#/article/create">NEW</el-link>
39+
<el-link href="/article/create">NEW</el-link>
4040
</el-menu-item>
4141
<el-menu-item index="4">
42-
<el-link href="/#/article/detail">DETAIL</el-link>
42+
<el-link href="/article/detail">DETAIL</el-link>
4343
</el-menu-item>
4444
<el-menu-item class="right-menu" index="5">
4545
<el-link href="/">x</el-link>

‎src/main.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import {createApp} from 'vue'
22
import App from './App.vue'
33
import router from './router'
44

5-
import 'highlight.js/styles/atom-one-dark.css'
5+
import hljs from 'highlight.js'
6+
// import 'highlight.js/styles/atom-one-dark.css'
67
import 'highlight.js/lib/common'
78
import hljsVuePlugin from '@highlightjs/vue-plugin'
89

@@ -15,14 +16,12 @@ import 'mavon-editor/dist/css/index.css'
1516

1617
const app = createApp(App)
1718
//
18-
// app.directive('highlight', function(el) {
19-
// const blocks = el.querySelectorAll('pre code')
20-
// setTimeout(() => {
21-
// blocks.forEach((block) => {
22-
// hljs.highlightBlock(block)
23-
// })
24-
// }, 10000)
25-
// })
19+
app.directive('hlcode', function(el) {
20+
const blocks = el.querySelectorAll('pre code')
21+
blocks.forEach((block) => {
22+
hljs.highlightBlock(block)
23+
})
24+
})
2625
// import RouterView from 'vue-router'
2726
// 全局注册组件，对所有page可见
2827
// import ArticleIndex from './views/article/index.vue'
@@ -35,7 +34,6 @@ const app = createApp(App)
3534
// app.component(name,(ElIconModules as any)[name])
3635
// }
3736
app.component('DeleteFilled', DeleteFilled)
38-
// app.component('MavonEditor', mavonEditor)
3937
app.use(router).use(hljsVuePlugin).use(ElementPlus).use(mavonEditor).mount('#app')
4038
// app.use(ElementPlus, { size: 'small', zIndex: 5000 })
4139
// app.mount('#app')

‎src/router/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {createRouter,createWebHashHistory} from 'vue-router'
1+
import {createRouter,createWebHistory} from 'vue-router'
22
// import ArticleIndex from "../views/article/index";
33
import ArticleList from "../views/article/list";
44
import ArticleCreate from "../views/article/create";
@@ -40,7 +40,7 @@ const routes = [
4040
const router = createRouter({
4141
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
4242
mode: 'history',
43-
history: createWebHashHistory(),
43+
history: createWebHistory(),
4444
// history: createWebHistory(),
4545
routes, // `routes: routes` 的缩写
4646
})

‎src/views/article/detail.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
<div class="content-margin-left">
1212
<h3>{{ articleDetail.title }}</h3>
1313
</div>
14-
<highlightjs language='python' code="import os\n print('hello world')" />
14+
<!-- <highlightjs language='python' code="import os\n print('hello world')" />-->
15+
<div v-hlcode v-html="articleDetail.content"></div>
1516
</div>
17+
1618
</el-col>
1719

1820
<el-col :span="5">
@@ -82,6 +84,9 @@
8284
</script>
8385

8486
<style scoped>
87+
/*@import './styles/atom-one-dark.css';*/
88+
@import './styles/github-dark.css';
89+
8590
.grid-content {
8691
border-radius: 4px;
8792
}

‎src/views/article/styles/github-dark.css

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
0