https://github.com/atomjoy/shiki-highlighter
Shiki code highlighter example in html, php, js with cdn and wordpress.
https://github.com/atomjoy/shiki-highlighter
code-highlight code-highlighter php-code-highlight shiki shiki-highlighter shiki-toggle-theme syntax-highlighting
Last synced: over 1 year ago
JSON representation
Shiki code highlighter example in html, php, js with cdn and wordpress.
- Host: GitHub
- URL: https://github.com/atomjoy/shiki-highlighter
- Owner: atomjoy
- Created: 2024-09-07T12:42:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-20T22:47:46.000Z (over 1 year ago)
- Last Synced: 2025-01-20T23:20:22.119Z (over 1 year ago)
- Topics: code-highlight, code-highlighter, php-code-highlight, shiki, shiki-highlighter, shiki-toggle-theme, syntax-highlighting
- Language: PHP
- Homepage: https://github.com/atomjoy/shiki-highlighter
- Size: 215 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shiki Highlighter Example Js
Shiki code highlighter example in javascript. How to use modern syntax highlighter Shiki with copy to clipboard.
## Code
-
## Toggle theme
## Shiki page
## Html example
```html
Laravel validation errors
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=VT323&display=swap');
:root {
/* doesn't matter here plugin get it from theme style */
--shiki-dark: #dbd7ca;
--shiki-dark-bg: #131313;
--shiki-dim: #2e3440;
--shiki-dim-bg: #131313;
}
body {
padding-inline: 50px;
color: #000;
background: #fff;
font-family: Poppins, monospace;
}
h1 {
float: left;
width: 100%;
font-size: 40px;
margin-top: 50px;
}
p {
float: left;
width: 100%;
}
.btn-toggle {
position: fixed;
top: 10px;
right: 10px;
font-size: 14px;
font-weight: 300;
letter-spacing: 1px;
color: #fff;
background: #131313;
border-radius: 15px;
padding: 10px 15px;
border: none;
cursor: pointer;
}
pre {
float: left;
width: 100%;
border-radius: 5px;
border: 10px solid #fbfbfb;
}
code {
float: left;
width: 100%;
min-height: 100px;
padding: 20px;
box-sizing: border-box;
border-radius: 5px;
font-family: "VT323", system-ui;
font-family: "JetBrains Mono", consolas, system-ui;
background-color: #dbd7ca66;
/* background-color: #f6f6f6; */
overflow: auto;
scrollbar-width: thin;
}
.shiki {
float: left;
width: 100%;
}
body.dark .shiki,
body.dark .shiki span,
body.dark code {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/* font-style: var(--shiki-font-style) !important;
font-weight: var(--shiki-font-weight) !important;
text-decoration: var(--shiki-text-decoration) !important; */
}
body.dim .shiki,
body.dim .shiki span,
body.dim code {
color: var(--shiki-dim) !important;
background-color: var(--shiki-dim-bg) !important;
/* font-style: var(--shiki-font-style) !important;
font-weight: var(--shiki-font-weight) !important;
text-decoration: var(--shiki-text-decoration) !important; */
}
function decodeHTMLEntities(text) {
var textArea = document.createElement('textarea');
textArea.innerHTML = text;
return textArea.value;
}
function encodeHTMLEntities(text) {
var textArea = document.createElement('textarea');
textArea.innerText = text;
return textArea.innerHTML;
}
let theme = 'light'
function toggleTheme() {
document.body.classList.remove('light')
document.body.classList.remove('dark')
document.body.classList.remove('dim')
if (theme == 'dim') {
theme = 'light'
} else if (theme == 'dark') {
theme = "dim"
} else if (theme == 'light') {
theme = "dark"
}
document.body.classList.add(theme)
}
Toggle Theme
How to get the first error from Request Validation in Laravel
Jeżeli chcesz wyświetlić tylko pojedyńczy błąd walidacji danych wejściowych użyj parametru bail.
Wyświetlaj tylko pojedyńczy błąd walidacji z FormRequest.
import { codeToHtml } from 'https://esm.sh/shiki@v2.0.1'
async function textToCode(code, id = 'c1', lang = 'php') {
// Highlight
let el = document.getElementById(id)
el.innerHTML = await codeToHtml(code, {
lang: lang,
themes: {
light: 'vitesse-light',
dark: 'vitesse-dark',
dim: 'everforest-dark',
},
defaultColor: 'light',
});
// Copy to clipboard
let cp = document.createElement("div")
cp.classList.add('codecopy')
cp.innerText = 'copy'
cp.dataset.code = code
cp.addEventListener('click', () => {
let c = cp.dataset.code
navigator.clipboard.writeText(c)
alert('Copied to clipboard')
})
el.appendChild(cp)
}
textToCode(`<?php
class UserController extends Controller {
public function uploadAvatar(Request $request) {
$request->validate([
'avatar' => 'bail|required|image|mimes:png|max:2048|dimensions:max_width=256,max_height=256',
]);
}
}`, 'c1', 'php');
textToCode(`<?php
class UploadRequest extends FormRequest {
protected $stopOnFirstFailure = true;
public function authorize() {
return true; // Allow all
}
public function rules() {
return [
'avatar' => 'required|image|mimes:png|max:2048|dimensions:max_width=512,max_height=512',
];
}
}`, 'c2', 'php');
```