Skip to content

Commit 51ea27a

Browse files
atomjoyatomjoy
committed
Code highlightjs toggle theme
1 parent 47169b9 commit 51ea27a

File tree

8 files changed

+506
-20
lines changed

8 files changed

+506
-20
lines changed

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

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,71 @@
11
<!-- CodeHighlight.vue -->
22
<script setup>
3+
import { ref } from 'vue'
4+
35
import 'highlight.js/styles/default.css'
6+
// Light set normal
47
import 'highlight.js/styles/github.min.css'
5-
import hljs from 'highlight.js/lib/common';
6-
import hljsVuePlugin from "@highlightjs/vue-plugin";
8+
// import 'highlight.js/styles/grayscale.min.css'
9+
// import 'highlight.js/styles/isbl-editor-light.min.css'
10+
// import 'highlight.js/styles/ascetic.min.css'
11+
// import 'highlight.js/styles/mono-blue.min.css'
12+
13+
// Dark set from current dir css
14+
import './css/hybrid-dark.css'
15+
// import './css/atom-one-dark.css'
16+
// import './css/an-old-hope-dark.css'
17+
// import './css/srcery-dark.css'
18+
// import './css/kimbie-dark.css'
19+
20+
import hljs from 'highlight.js/lib/common'
21+
import hljsVuePlugin from '@highlightjs/vue-plugin'
722
823
const props = defineProps({
9-
code: { default: '<?php echo "Insert code here...";' },
10-
language: { type: String, default: 'php'}
24+
code: { default: '<?php echo "Insert code here...";' },
25+
language: { type: String, default: 'php' },
26+
theme: { type: String, default: '' },
1127
})
1228
1329
const highlightjs = hljsVuePlugin.component
1430
15-
function debugCode(code, language = "php") {
16-
hljs.getLanguage(language)
17-
const result = hljs.highlight(props.code, { language: language });
18-
console.log(result)
31+
function debugCode(code, language = 'php') {
32+
hljs.getLanguage(language)
33+
const result = hljs.highlight(props.code, { language: language })
34+
console.log(result)
35+
}
36+
37+
const theme = ref(props.theme)
38+
39+
function toggleTheme() {
40+
theme.value == '' ? (theme.value = 'dark-theme') : (theme.value = '')
1941
}
2042
</script>
2143

2244
<template>
23-
<highlightjs
24-
:code="props.code"
25-
:language="props.language"
26-
/>
27-
</template>
45+
<div class="code-topbar">
46+
<button class="toggle-code-theme" @click="toggleTheme">{{ $t('Change Theme') }}</button>
47+
</div>
48+
<highlightjs :class="theme" :code="props.code" :language="props.language" />
49+
</template>
50+
51+
<style>
52+
.code-topbar {
53+
display: block;
54+
overflow: hidden;
55+
margin: 10px auto;
56+
}
57+
.toggle-code-theme {
58+
float: right;
59+
font-size: 14px;
60+
padding: 10px 20px;
61+
color: var(--text-primary);
62+
border-radius: var(--border-radius);
63+
background: transparent;
64+
border: 2px solid var(--code-border);
65+
cursor: pointer;
66+
}
67+
.toggle-code-theme:hover {
68+
color: var(--accent-primary);
69+
border: 2px solid var(--accent-primary);
70+
}
71+
</style>

‎resources/js/components/utils/CodeHighlight/css/an-old-hope-dark.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*!
2+
Theme: An Old Hope – Star Wars Syntax
3+
Author: (c) Gustavo Costa <[email protected]>
4+
Maintainer: @gusbemacbe
5+
6+
Original theme - Ocean Dark Theme – by https://github.com/gavsiu
7+
Based on Jesse Leite's Atom syntax theme 'An Old Hope'
8+
https://github.com/JesseLeite/an-old-hope-syntax-atom
9+
*/
10+
11+
/* Millenium Falcon */
12+
.dark-theme .hljs {
13+
background: #1c1d21;
14+
color: #c0c5ce;
15+
}
16+
17+
/* Death Star Comment */
18+
.dark-theme .hljs-comment,
19+
.dark-theme .hljs-quote {
20+
color: #b6b18b;
21+
}
22+
23+
/* Darth Vader */
24+
.dark-theme .hljs-variable,
25+
.dark-theme .hljs-template-variable,
26+
.dark-theme .hljs-tag,
27+
.dark-theme .hljs-name,
28+
.dark-theme .hljs-selector-id,
29+
.dark-theme .hljs-selector-class,
30+
.dark-theme .hljs-regexp,
31+
.dark-theme .hljs-deletion {
32+
color: #eb3c54;
33+
}
34+
35+
/* Threepio */
36+
.dark-theme .hljs-number,
37+
.dark-theme .hljs-built_in,
38+
.dark-theme .hljs-literal,
39+
.dark-theme .hljs-type,
40+
.dark-theme .hljs-params,
41+
.dark-theme .hljs-meta,
42+
.dark-theme .hljs-link {
43+
color: #e7ce56;
44+
}
45+
46+
/* Luke Skywalker */
47+
.dark-theme .hljs-attribute {
48+
color: #ee7c2b;
49+
}
50+
51+
/* Obi Wan Kenobi */
52+
.dark-theme .hljs-string,
53+
.dark-theme .hljs-regexp,
54+
.dark-theme .hljs-symbol,
55+
.dark-theme .hljs-bullet,
56+
.dark-theme .hljs-doctag,
57+
.dark-theme .hljs-addition {
58+
color: #4fb4d7;
59+
background-image: none;
60+
}
61+
62+
/* Yoda */
63+
.dark-theme .hljs-title,
64+
.dark-theme .hljs-section {
65+
color: #78bb65;
66+
}
67+
68+
/* Mace Windu */
69+
.dark-theme .hljs-keyword,
70+
.dark-theme .hljs-selector-tag {
71+
color: #b45ea4;
72+
}
73+
74+
.dark-theme .hljs-emphasis {
75+
font-style: italic;
76+
}
77+
78+
.dark-theme .hljs-strong {
79+
font-weight: bold;
80+
}

‎resources/js/components/utils/CodeHighlight/css/atom-one-dark.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/*
2+
3+
Atom One Dark by Daniel Gamage
4+
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
5+
6+
base: #282c34
7+
mono-1: #abb2bf
8+
mono-2: #818896
9+
mono-3: #5c6370
10+
hue-1: #56b6c2
11+
hue-2: #61aeee
12+
hue-3: #c678dd
13+
hue-4: #98c379
14+
hue-5: #e06c75
15+
hue-5-2: #be5046
16+
hue-6: #d19a66
17+
hue-6-2: #e6c07b
18+
19+
*/
20+
21+
.dark-theme .hljs {
22+
color: #abb2bf;
23+
background: #282c34;
24+
}
25+
26+
.dark-theme .hljs-comment,
27+
.dark-theme .hljs-quote {
28+
color: #5c6370;
29+
font-style: italic;
30+
}
31+
32+
.dark-theme .hljs-doctag,
33+
.dark-theme .hljs-keyword,
34+
.dark-theme .hljs-formula {
35+
color: #c678dd;
36+
}
37+
38+
.dark-theme .hljs-section,
39+
.dark-theme .hljs-name,
40+
.dark-theme .hljs-selector-tag,
41+
.dark-theme .hljs-deletion,
42+
.dark-theme .hljs-subst {
43+
color: #e06c75;
44+
}
45+
46+
.dark-theme .hljs-literal {
47+
color: #56b6c2;
48+
}
49+
50+
.dark-theme .hljs-string,
51+
.dark-theme .hljs-regexp,
52+
.dark-theme .hljs-symbol,
53+
.dark-theme .hljs-bullet,
54+
.dark-theme .hljs-doctag,
55+
.dark-theme .hljs-addition,
56+
.dark-theme .hljs-attribute,
57+
.dark-theme .hljs-meta .hljs-string {
58+
color: #98c379;
59+
background-image: none;
60+
}
61+
62+
.dark-theme .hljs-attr,
63+
.dark-theme .hljs-variable,
64+
.dark-theme .hljs-template-variable,
65+
.dark-theme .hljs-type,
66+
.dark-theme .hljs-selector-class,
67+
.dark-theme .hljs-selector-attr,
68+
.dark-theme .hljs-selector-pseudo,
69+
.dark-theme .hljs-number {
70+
color: #d19a66;
71+
}
72+
73+
.dark-theme .hljs-symbol,
74+
.dark-theme .hljs-bullet,
75+
.dark-theme .hljs-link,
76+
.dark-theme .hljs-meta,
77+
.dark-theme .hljs-selector-id,
78+
.dark-theme .hljs-title {
79+
color: #61aeee;
80+
}
81+
82+
.dark-theme .hljs-built_in,
83+
.dark-theme .hljs-title.class_,
84+
.dark-theme .hljs-class .hljs-title {
85+
color: #e6c07b;
86+
}
87+
88+
.dark-theme .hljs-emphasis {
89+
font-style: italic;
90+
}
91+
92+
.dark-theme .hljs-strong {
93+
font-weight: bold;
94+
}
95+
96+
.dark-theme .hljs-link {
97+
text-decoration: underline;
98+
}

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/*
2+
3+
vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
4+
5+
*/
6+
7+
.dark-theme .hljs {
8+
background: #1d1f21;
9+
color: #c5c8c6;
10+
}
11+
12+
/*selection color*/
13+
.dark-theme .hljs::selection,
14+
.dark-theme .hljs span::selection {
15+
background: #373b41;
16+
}
17+
18+
.dark-theme .hljs::-moz-selection,
19+
.dark-theme .hljs span::-moz-selection {
20+
background: #373b41;
21+
}
22+
23+
/*color: fg_yellow*/
24+
.dark-theme .hljs-title,
25+
.dark-theme .hljs-name {
26+
color: #f0c674;
27+
}
28+
29+
/*color: fg_comment*/
30+
.dark-theme .hljs-comment,
31+
.dark-theme .hljs-meta,
32+
.dark-theme .hljs-meta .hljs-keyword {
33+
color: #707880;
34+
}
35+
36+
/*color: fg_red*/
37+
.dark-theme .hljs-number,
38+
.dark-theme .hljs-symbol,
39+
.dark-theme .hljs-literal,
40+
.dark-theme .hljs-deletion,
41+
.dark-theme .hljs-link {
42+
color: #cc6666;
43+
}
44+
45+
/*color: fg_green*/
46+
.dark-theme .hljs-string,
47+
.dark-theme .hljs-symbol,
48+
.dark-theme .hljs-bullet,
49+
.dark-theme .hljs-doctag,
50+
.dark-theme .hljs-addition,
51+
.dark-theme .hljs-regexp,
52+
.dark-theme .hljs-selector-attr,
53+
.dark-theme .hljs-selector-pseudo {
54+
color: #b5bd68;
55+
background-image: none;
56+
}
57+
58+
/*color: fg_purple*/
59+
.dark-theme .hljs-attribute,
60+
.dark-theme .hljs-code,
61+
.dark-theme .hljs-selector-id {
62+
color: #b294bb;
63+
}
64+
65+
/*color: fg_blue*/
66+
.dark-theme .hljs-keyword,
67+
.dark-theme .hljs-selector-tag,
68+
.dark-theme .hljs-bullet,
69+
.dark-theme .hljs-tag {
70+
color: #81a2be;
71+
}
72+
73+
/*color: fg_aqua*/
74+
.dark-theme .hljs-subst,
75+
.dark-theme .hljs-variable,
76+
.dark-theme .hljs-template-tag,
77+
.dark-theme .hljs-template-variable {
78+
color: #8abeb7;
79+
}
80+
81+
/*color: fg_orange*/
82+
.dark-theme .hljs-type,
83+
.dark-theme .hljs-built_in,
84+
.dark-theme .hljs-quote,
85+
.dark-theme .hljs-section,
86+
.dark-theme .hljs-selector-class {
87+
color: #de935f;
88+
}
89+
90+
.dark-theme .hljs-emphasis {
91+
font-style: italic;
92+
}
93+
94+
.dark-theme .hljs-strong {
95+
font-weight: bold;
96+
}

0 commit comments

Comments
 (0)