Skip to content

Commit e48f5d9

Browse files
atomjoyatomjoy
committed
Code highlightjs toggle theme
1 parent 301ec82 commit e48f5d9

File tree

6 files changed

+255
-5
lines changed

6 files changed

+255
-5
lines changed

‎resources/js/components/utils/CodeHighlight/CodeHighlight.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@ import { ref } from 'vue'
44
55
import 'highlight.js/styles/default.css'
66
// Light set normal
7-
import 'highlight.js/styles/github.min.css'
7+
// import 'highlight.js/styles/github.min.css'
88
// import 'highlight.js/styles/grayscale.min.css'
99
// import 'highlight.js/styles/isbl-editor-light.min.css'
1010
// import 'highlight.js/styles/ascetic.min.css'
1111
// import 'highlight.js/styles/mono-blue.min.css'
1212
13+
// Custom light
14+
import './css/mozilla-light.css'
15+
1316
// Dark set from current dir css
14-
import './css/dark/hybrid-dark.css'
17+
import './css/dark/mozilla-dark.css'
18+
// import './css/dark/hybrid-dark.css'
1519
// import './css/dark/an-old-hope-dark.css'
1620
// import './css/dark/atom-one-dark.css'
1721
// import './css/dark/atom-one-resonable-dark.css'

‎resources/js/components/utils/CodeHighlight/CodeHighlightMini.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!-- CodeHighlight.vue -->
2+
<script setup>
3+
import 'highlight.js/styles/default.css'
4+
import 'highlight.js/styles/github.min.css'
5+
import hljs from 'highlight.js/lib/common'
6+
import hljsVuePlugin from '@highlightjs/vue-plugin'
7+
8+
const props = defineProps({
9+
code: { default: '<?php echo "Insert code here...";' },
10+
language: { type: String, default: 'php' },
11+
})
12+
13+
const highlightjs = hljsVuePlugin.component
14+
15+
function debugCode(code, language = 'php') {
16+
hljs.getLanguage(language)
17+
const result = hljs.highlight(props.code, { language: language })
18+
console.log(result)
19+
}
20+
</script>
21+
22+
<template>
23+
<highlightjs :code="props.code" :language="props.language" />
24+
</template>
25+
26+
<style>
27+
@import url('./css/code.css');
28+
</style>

‎resources/js/components/utils/CodeHighlight/css/dark/mozilla-dark.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*!
2+
Theme: Mozilla
3+
Description: Light theme as seen on Mozilla.com
4+
Author: Mozilla.com
5+
6+
Current colors taken from Mozilla's CSS
7+
*/
8+
9+
/* Millenium Falcon */
10+
.dark-theme .hljs {
11+
color: #dcc200 !important;
12+
background: #232629 !important;
13+
}
14+
15+
/* Death Star Comment */
16+
.dark-theme .hljs-comment,
17+
.dark-theme .hljs-quote {
18+
color: #6a737d !important;
19+
}
20+
21+
/* Darth Vader */
22+
.dark-theme .hljs-variable,
23+
.dark-theme .hljs-template-variable,
24+
.dark-theme .hljs-tag,
25+
.dark-theme .hljs-name,
26+
.dark-theme .hljs-selector-id,
27+
.dark-theme .hljs-selector-class,
28+
.dark-theme .hljs-regexp,
29+
.dark-theme .hljs-deletion {
30+
color: #0069c2 !important;
31+
}
32+
33+
/* Threepio */
34+
.dark-theme .hljs-number,
35+
.dark-theme .hljs-built_in,
36+
.dark-theme .hljs-literal,
37+
.dark-theme .hljs-type,
38+
.dark-theme .hljs-params,
39+
.dark-theme .hljs-meta,
40+
.dark-theme .hljs-link {
41+
color: #e7ce56;
42+
}
43+
44+
/* Luke Skywalker */
45+
.dark-theme .hljs-attribute {
46+
color: #ee7c2b;
47+
}
48+
49+
/* Obi Wan Kenobi */
50+
.dark-theme .hljs-string,
51+
.dark-theme .hljs-regexp,
52+
.dark-theme .hljs-symbol,
53+
.dark-theme .hljs-bullet,
54+
.dark-theme .hljs-addition {
55+
color: #d30038 !important;
56+
background-image: none;
57+
}
58+
59+
.hljs-doctag {
60+
color: #ff6600 !important;
61+
}
62+
63+
/* Yoda */
64+
.dark-theme .hljs-title,
65+
.dark-theme .hljs-section {
66+
color: #007936 !important;
67+
}
68+
69+
/* Mace Windu */
70+
.dark-theme .hljs-keyword,
71+
.dark-theme .hljs-selector-tag {
72+
color: #0099ff !important;
73+
}
74+
75+
.dark-theme .hljs-emphasis {
76+
font-style: italic;
77+
}
78+
79+
.dark-theme .hljs-strong {
80+
font-weight: bold;
81+
}

‎resources/js/components/utils/CodeHighlight/css/mozilla-light.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/*!
2+
Theme: Mozilla
3+
Description: Light theme as seen on Mozilla.com
4+
Author: Mozilla.com
5+
6+
Current colors taken from Mozilla's CSS
7+
*/
8+
9+
.hljs {
10+
color: #24292e;
11+
background: #ffffff;
12+
}
13+
14+
.hljs-keyword,
15+
.hljs-meta .hljs-keyword,
16+
.hljs-template-tag,
17+
.hljs-template-variable,
18+
.hljs-type,
19+
.hljs-variable.language_ {
20+
/* prettylights-syntax-keyword */
21+
color: #1c4482 !important;
22+
}
23+
24+
.hljs-doctag {
25+
color: #ff6600 !important;
26+
}
27+
28+
.hljs-title,
29+
.hljs-title.class_,
30+
.hljs-title.class_.inherited__,
31+
.hljs-title.function_ {
32+
/* prettylights-syntax-entity */
33+
color: #007936 !important;
34+
}
35+
36+
.hljs-attr,
37+
.hljs-attribute,
38+
.hljs-literal,
39+
.hljs-meta,
40+
.hljs-number,
41+
.hljs-operator,
42+
.hljs-variable,
43+
.hljs-selector-attr,
44+
.hljs-selector-class,
45+
.hljs-selector-id {
46+
/* prettylights-syntax-constant */
47+
color: #0069c2 !important;
48+
}
49+
50+
.hljs-regexp,
51+
.hljs-string,
52+
.hljs-meta .hljs-string {
53+
/* prettylights-syntax-string */
54+
color: #d30038 !important;
55+
}
56+
57+
.hljs-built_in,
58+
.hljs-symbol {
59+
/* prettylights-syntax-variable */
60+
color: #e36209 !important;
61+
}
62+
63+
.hljs-comment,
64+
.hljs-code,
65+
.hljs-formula {
66+
/* prettylights-syntax-comment */
67+
color: #6a737d !important;
68+
}
69+
70+
.hljs-name,
71+
.hljs-quote,
72+
.hljs-selector-tag,
73+
.hljs-selector-pseudo {
74+
/* prettylights-syntax-entity-tag */
75+
color: #22863a !important;
76+
}
77+
78+
.hljs-subst {
79+
/* prettylights-syntax-storage-modifier-import */
80+
color: #24292e !important;
81+
}
82+
83+
.hljs-section {
84+
/* prettylights-syntax-markup-heading */
85+
color: #0069c2 !important;
86+
font-weight: bold;
87+
}
88+
89+
.hljs-bullet {
90+
/* prettylights-syntax-markup-list */
91+
color: #735c0f !important;
92+
}
93+
94+
.hljs-emphasis {
95+
/* prettylights-syntax-markup-italic */
96+
color: #24292e !important;
97+
font-style: italic;
98+
}
99+
100+
.hljs-strong {
101+
/* prettylights-syntax-markup-bold */
102+
color: #24292e !important;
103+
font-weight: bold;
104+
}
105+
106+
.hljs-addition {
107+
/* prettylights-syntax-markup-inserted */
108+
color: #22863a !important;
109+
background-color: #f0fff4 !important;
110+
}
111+
112+
.hljs-deletion {
113+
/* prettylights-syntax-markup-deleted */
114+
color: #b31d28 !important;
115+
background-color: #ffeef0 !important;
116+
}
117+
118+
.hljs-char.escape_,
119+
.hljs-link,
120+
.hljs-params,
121+
.hljs-property,
122+
.hljs-punctuation,
123+
.hljs-tag {
124+
/* purposely ignored */
125+
color: #0069c2 !important;
126+
}
127+
128+
.hljs-ln-code .hljs-string + .hljs-string {
129+
color: #ff9900 !important;
130+
font-weight: 500;
131+
}

‎resources/js/views/demo/CodeView.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import CodeHighlight from '@/components/utils/CodeHighlight/CodeHighlight.vue'
3+
import CodeHighlightMini from '@/components/utils/CodeHighlight/CodeHighlightMini.vue'
34
import TopMenu from '@/views/page/menu/TopMenu.vue'
45
56
const code = `<?php
@@ -46,6 +47,7 @@ class User extends Authenticatable
4647
return [
4748
'email_verified_at' => 'datetime',
4849
'password' => 'hashed',
50+
'size' => '15px',
4951
];
5052
}
5153
}
@@ -55,7 +57,8 @@ class User extends Authenticatable
5557
<template>
5658
<TopMenu />
5759
<div class="section">
58-
<!-- <CodeHighlight lang="php" :code="code" theme="dark-theme" /> -->
5960
<CodeHighlight lang="php" :code="code" filename="App\Models\User.php" />
61+
<!-- <CodeHighlight lang="php" :code="code" theme="dark-theme" filename="App\Models\User.php" /> -->
62+
<!-- <CodeHighlightMini lang="php" :code="code" /> -->
6063
</div>
6164
</template>

‎resources/views/welcome.blade.php‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scrollbar-thin" data-theme="dark">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -15,8 +16,8 @@
1516

1617
<!-- Highligt.js (only for code line numbers, delete if don't want line bumbers) -->
1718
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
18-
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
19-
<script type="text/javascript">
19+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
20+
<script type="text/javascript">
2021
window.onload = (event) => {
2122
hljs.highlightAll();
2223
hljs.initLineNumbersOnLoad({ startFrom: 1 });
@@ -26,9 +27,11 @@
2627

2728
@vite('resources/css/app.css')
2829
</head>
30+
2931
<body>
3032
<div id="app"></div>
3133

3234
@vite('resources/js/app.js')
3335
</body>
36+
3437
</html>

0 commit comments

Comments
 (0)