Code highlightjs toggle theme

Author: atomjoy

resources/js/assets/code.css

@@ -1,5 +1,3 @@
-@import './code.css';
-
 h1 {
 	float: left;
 	width: 100%;
@@ -8,7 +6,7 @@ h1 {
 
 .btn {
 	cursor: pointer;
-	display: inline-block;	
+	display: inline-block;
 	font-weight: 500;
 	line-height: 1.5;
 	color: #212529;
@@ -17,26 +15,26 @@ h1 {
 	vertical-align: middle;
 	user-select: none;
 	background-color: transparent;
-	border: 1px solid transparent;	  
-	padding: .375rem .75rem;
+	border: 1px solid transparent;
+	padding: 0.375rem 0.75rem;
 	font-size: 1rem;
-	border-radius: .25rem;
-	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+	border-radius: 0.25rem;
+	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 .btn-primary {
 	color: #fff;
 	background-color: var(--accent-primary); /* #C51B2A; */
 	border-color: var(--accent-primary); /* #C51B2A; */
-	padding: .5rem 2rem;
+	padding: 0.5rem 2rem;
 	min-width: 130px;
 }
 
 .btn-secondary {
 	color: #fff;
 	background-color: #212529;
 	border-color: #212529;
-	padding: .5rem 2rem;
+	padding: 0.5rem 2rem;
 	min-width: 130px;
 }
 
@@ -46,10 +44,10 @@ h1 {
 }
 
 .mx-2 {
-	margin-right: .5rem !important;
-	margin-left: .5rem !important;
+	margin-right: 0.5rem !important;
+	margin-left: 0.5rem !important;
 }
 
 .btn:hover {
 	filter: brightness(1.2);
-}
+}

resources/js/assets/main.css

@@ -11,11 +11,11 @@ import 'highlight.js/styles/github.min.css'
 // import 'highlight.js/styles/mono-blue.min.css'
 
 // Dark set from current dir css
-import './css/hybrid-dark.css'
-// import './css/atom-one-dark.css'
-// import './css/an-old-hope-dark.css'
-// import './css/srcery-dark.css'
-// import './css/kimbie-dark.css'
+import './css/dark/hybrid-dark.css'
+// import './css/dark/atom-one-dark.css'
+// import './css/dark/an-old-hope-dark.css'
+// import './css/dark/srcery-dark.css'
+// import './css/dark/kimbie-dark.css'
 
 import hljs from 'highlight.js/lib/common'
 import hljsVuePlugin from '@highlightjs/vue-plugin'
@@ -24,6 +24,7 @@ const props = defineProps({
 	code: { default: '<?php echo "Insert code here...";' },
 	language: { type: String, default: 'php' },
 	theme: { type: String, default: '' },
+	filename: { type: String, default: '' },
 })
 
 const highlightjs = hljsVuePlugin.component
@@ -42,30 +43,14 @@ function toggleTheme() {
 </script>
 
 <template>
-	<div class="code-topbar">
-		<button class="toggle-code-theme" @click="toggleTheme">{{ $t('Change Theme') }}</button>
+	<div class="hljs-code-topbar">
+		<span class="hljs-code-filename">{{ props.filename }}</span>
+		<button v-if="theme == ''" class="hljs-code-toggle-theme" @click="toggleTheme"><i class="fa-solid fa-toggle-off"></i></button>
+		<button v-else class="hljs-code-toggle-theme" @click="toggleTheme"><i class="fa-solid fa-toggle-on"></i></button>
 	</div>
 	<highlightjs :class="theme" :code="props.code" :language="props.language" />
 </template>
 
 <style>
-.code-topbar {
-	display: block;
-	overflow: hidden;
-	margin: 10px auto;
-}
-.toggle-code-theme {
-	float: right;
-	font-size: 14px;
-	padding: 10px 20px;
-	color: var(--text-primary);
-	border-radius: var(--border-radius);
-	background: transparent;
-	border: 2px solid var(--code-border);
-	cursor: pointer;
-}
-.toggle-code-theme:hover {
-	color: var(--accent-primary);
-	border: 2px solid var(--accent-primary);
-}
+@import url('./css/code.css');
 </style>

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

@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
+:root {
+	/* code highlighterjs */
+	--code-font-family: 'JetBrains Mono', monospace, consolas;
+	--code-font-size: 14px;
+	--code-border: #00339922;
+	--code-line-numbers: #6885ba;
+	--code-line-border: #ff2233aa;
+	--code-line-underline: #00339922;
+	--code-filename: var(--accent-primary); /* #d73a49;  #d30040; */
+}
+
+pre {
+	margin: 20px 0px;
+}
+
+code,
+code.hljs {
+	font-size: var(--code-font-size);
+	font-family: var(--code-font-family);
+	border: 1px solid var(--code-border);
+	border-radius: var(--border-radius);
+	padding: 10px !important;
+	overflow-y: hidden !important;
+	overflow-x: auto !important;
+}
+
+/* for block of numbers */
+.hljs-ln {
+	float: left;
+	width: 100%;
+	font-size: var(--code-font-size);
+	font-family: var(--code-font-family);
+}
+
+.hljs-ln tbody {
+	float: left;
+	width: 100% !important;
+	border: 1px solid var(--code-border);
+}
+
+.hljs-ln tbody tr {
+	display: flex-table;
+	border-bottom: 1px solid var(--code-line-underline);
+}
+
+.hljs-ln-numbers {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	text-align: center;
+	color: var(--code-line-numbers);
+	border-right: 1px solid var(--code-line-border);
+	vertical-align: top;
+	padding: 5px 10px !important;
+
+	/* your custom style here */
+	/*min-width: 60px;*/
+}
+
+/* for block of code */
+.hljs-ln-code {
+	width: 100% !important;
+	padding-left: 10px !important;
+	line-height: 24px;
+}
+
+/* toggle theme button */
+.hljs-code-topbar {
+	float: left;
+	width: 100%;
+	padding: 5px;
+	margin: 20px auto 10px auto;
+	border-radius: var(--border-radius);
+	border: 1px solid var(--code-border);
+	background: transparent;
+	overflow: hidden;
+}
+
+.hljs-code-filename {
+	float: left;
+	padding: 10px 20px;
+	color: var(--code-filename);
+	font-family: var(--code-font-family);
+	font-weight: 700;
+}
+
+.hljs-code-toggle-theme {
+	float: right;
+	font-size: 14px;
+	padding: 10px 20px;
+	color: var(--placeholder);
+	border-radius: var(--border-radius);
+	border: 1px solid var(--code-border);
+	background: transparent;
+	cursor: pointer;
+}
+
+.hljs-code-toggle-theme:hover {
+	color: var(--accent-primary);
+	border: 1px solid var(--accent-primary);
+}

resources/js/components/utils/CodeHighlight/css/code.css

@@ -1,5 +1,6 @@
 <script setup>
 import CodeHighlight from '@/components/utils/CodeHighlight/CodeHighlight.vue'
+import TopMenu from '@/views/page/menu/TopMenu.vue'
 
 const code = `<?php
 
@@ -52,8 +53,9 @@ class User extends Authenticatable
 </script>
 
 <template>
+	<TopMenu />
 	<div class="section">
 		<!-- <CodeHighlight lang="php" :code="code" theme="dark-theme" /> -->
-		<CodeHighlight lang="php" :code="code" />
+		<CodeHighlight lang="php" :code="code" filename="App\Models\User.php" />
 	</div>
 </template>