{"id":19423220,"url":"https://github.com/atomjoy/shiki-highlighter","last_synced_at":"2026-07-16T00:30:25.880Z","repository":{"id":255853620,"uuid":"853751432","full_name":"atomjoy/shiki-highlighter","owner":"atomjoy","description":"Shiki code highlighter example in html, php, js with cdn and wordpress.","archived":false,"fork":false,"pushed_at":"2025-01-20T22:47:46.000Z","size":220,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T23:20:22.119Z","etag":null,"topics":["code-highlight","code-highlighter","php-code-highlight","shiki","shiki-highlighter","shiki-toggle-theme","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://github.com/atomjoy/shiki-highlighter","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomjoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-07T12:42:08.000Z","updated_at":"2025-01-20T22:46:05.000Z","dependencies_parsed_at":"2024-11-10T13:49:29.075Z","dependency_job_id":null,"html_url":"https://github.com/atomjoy/shiki-highlighter","commit_stats":null,"previous_names":["atomjoy/shiki-highlighter"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fshiki-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fshiki-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fshiki-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fshiki-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomjoy","download_url":"https://codeload.github.com/atomjoy/shiki-highlighter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240603018,"owners_count":19827630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-highlight","code-highlighter","php-code-highlight","shiki","shiki-highlighter","shiki-toggle-theme","syntax-highlighting"],"created_at":"2024-11-10T13:37:28.670Z","updated_at":"2026-07-16T00:30:25.797Z","avatar_url":"https://github.com/atomjoy.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shiki Highlighter Example Js\n\nShiki code highlighter example in javascript. How to use modern syntax highlighter Shiki with copy to clipboard.\n\n## Code\n\n- \u003chttps://github.com/atomjoy/shiki-highlighter/blob/main/shiki-highlighter.html\u003e\n\n## Toggle theme\n\n\u003cimg src=\"https://raw.githubusercontent.com/atomjoy/shiki-highlighter/main/shiki-highlighter.png\" width=\"100%\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/atomjoy/shiki-highlighter/main/shiki-highlighter-dark.png\" width=\"100%\"\u003e\n\n## Shiki page\n\n\u003chttps://shiki.matsu.io\u003e\n\n## Html example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eLaravel validation errors\u003c/title\u003e\n\n    \u003cstyle\u003e\n        @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700\u0026family=JetBrains+Mono:ital,wght@0,100..800;1,100..800\u0026family=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\u0026family=VT323\u0026display=swap');\n\n        :root {\n            /* doesn't matter here plugin get it from theme style */\n            --shiki-dark: #dbd7ca;\n            --shiki-dark-bg: #131313;\n            --shiki-dim: #2e3440;\n            --shiki-dim-bg: #131313;\n        }\n\n        body {\n            padding-inline: 50px;\n            color: #000;\n            background: #fff;\n            font-family: Poppins, monospace;\n        }\n\n        h1 {\n            float: left;\n            width: 100%;\n            font-size: 40px;\n            margin-top: 50px;\n        }\n\n        p {\n            float: left;\n            width: 100%;\n        }\n\n        .btn-toggle {\n            position: fixed;\n            top: 10px;\n            right: 10px;\n            font-size: 14px;\n            font-weight: 300;\n            letter-spacing: 1px;\n            color: #fff;\n            background: #131313;\n            border-radius: 15px;\n            padding: 10px 15px;\n            border: none;\n            cursor: pointer;\n        }\n\n        pre {\n            float: left;\n            width: 100%;\n            border-radius: 5px;\n            border: 10px solid #fbfbfb;\n        }\n\n        code {\n            float: left;\n            width: 100%;\n            min-height: 100px;\n            padding: 20px;\n            box-sizing: border-box;\n            border-radius: 5px;\n            font-family: \"VT323\", system-ui;\n            font-family: \"JetBrains Mono\", consolas, system-ui;\n            background-color: #dbd7ca66;\n            /* background-color: #f6f6f6; */\n            overflow: auto;\n            scrollbar-width: thin;\n        }\n\n        .shiki {\n            float: left;\n            width: 100%;\n        }\n\n        body.dark .shiki,\n        body.dark .shiki span,\n        body.dark code {\n            color: var(--shiki-dark) !important;\n            background-color: var(--shiki-dark-bg) !important;\n\n            /* font-style: var(--shiki-font-style) !important;\n            font-weight: var(--shiki-font-weight) !important;\n            text-decoration: var(--shiki-text-decoration) !important; */\n        }\n\n        body.dim .shiki,\n        body.dim .shiki span,\n        body.dim code {\n            color: var(--shiki-dim) !important;\n            background-color: var(--shiki-dim-bg) !important;\n\n            /* font-style: var(--shiki-font-style) !important;\n            font-weight: var(--shiki-font-weight) !important;\n            text-decoration: var(--shiki-text-decoration) !important; */\n        }\n    \u003c/style\u003e\n\n    \u003cscript\u003e\n        function decodeHTMLEntities(text) {\n            var textArea = document.createElement('textarea');\n            textArea.innerHTML = text;\n            return textArea.value;\n        }\n\n        function encodeHTMLEntities(text) {\n            var textArea = document.createElement('textarea');\n            textArea.innerText = text;\n            return textArea.innerHTML;\n        }\n\n        let theme = 'light'\n\n        function toggleTheme() {\n            document.body.classList.remove('light')\n            document.body.classList.remove('dark')\n            document.body.classList.remove('dim')\n\n            if (theme == 'dim') {\n                theme = 'light'\n            } else if (theme == 'dark') {\n                theme = \"dim\"\n            } else if (theme == 'light') {\n                theme = \"dark\"\n            }\n\n            document.body.classList.add(theme)\n        }\n    \u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003c!-- \u003cbutton onclick=\"document.body.classList.toggle('dark')\" class=\"btn-toggle\"\u003eToggle Dark\u003c/button\u003e --\u003e\n    \u003cbutton onclick=\"toggleTheme()\" class=\"btn-toggle\"\u003eToggle Theme\u003c/button\u003e\n\n    \u003ch1\u003eHow to get the first error from Request Validation in Laravel\u003c/h1\u003e\n\n    \u003cp\u003eJeżeli chcesz wyświetlić tylko pojedyńczy błąd walidacji danych wejściowych użyj parametru bail.\u003c/p\u003e\n    \u003cdiv id=\"c1\"\u003e\u003c/div\u003e\n\n    \u003cp\u003eWyświetlaj tylko pojedyńczy błąd walidacji z FormRequest.\u003c/p\u003e\n    \u003cdiv id=\"c2\"\u003e\u003c/div\u003e\n\n    \u003cscript type=\"module\"\u003e\n        import { codeToHtml } from 'https://esm.sh/shiki@v2.0.1'\n\n        async function textToCode(code, id = 'c1', lang = 'php') {\n            // Highlight\n            let el = document.getElementById(id)\n            el.innerHTML = await codeToHtml(code, {\n                lang: lang,\n                themes: {\n                    light: 'vitesse-light',\n                    dark: 'vitesse-dark',\n                    dim: 'everforest-dark',\n                },\n                defaultColor: 'light',\n            });\n\n            // Copy to clipboard\n            let cp = document.createElement(\"div\")\n            cp.classList.add('codecopy')\n            cp.innerText = 'copy'\n            cp.dataset.code = code\n            cp.addEventListener('click', () =\u003e {\n                let c = cp.dataset.code\n                navigator.clipboard.writeText(c)\n                alert('Copied to clipboard')\n            })\n            el.appendChild(cp)\n        }\n\n\n        textToCode(`\u003c?php\n\nclass UserController extends Controller {\n\n    public function uploadAvatar(Request $request) {\n        $request-\u003evalidate([\n            'avatar' =\u003e 'bail|required|image|mimes:png|max:2048|dimensions:max_width=256,max_height=256',\n        ]);\n    }\n}`, 'c1', 'php');\n\n\n        textToCode(`\u003c?php\n\nclass UploadRequest extends FormRequest {\n\n    protected $stopOnFirstFailure = true;\n\n    public function authorize() {\n        return true; // Allow all\n    }\n\n    public function rules() {\n        return [\n            'avatar' =\u003e 'required|image|mimes:png|max:2048|dimensions:max_width=512,max_height=512',\n        ];\n    }\n}`, 'c2', 'php');\n    \u003c/script\u003e\n\n    \u003cp\u003e\u003ca href=\"https://textmate-grammars-themes.netlify.app/?theme=github-light\u0026grammar=javascript\" target=\"_blank\"\u003eTheme styles\u003c/a\u003e\u003c/p\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fshiki-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomjoy%2Fshiki-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fshiki-highlighter/lists"}