Darkmodus erkennen und nutzen

So erkennt man den Darkmodus , bzw so arbeitet man damit

Der hier verwendete Code

<!doctype html> <html lang="en" class="bg-gray-100 dark:bg-gray-900 transition-colors duration-500 ease-in-out"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Davy de Vries</title> <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900" rel="stylesheet"> <style> /*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document ======== */ /** Use a better box model (opinionated). */ *, ::before, ::after { box-sizing: border-box; } /** Use a more readable tab size (opinionated). */ html { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } /** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ======== */ /** Remove the margin in all browsers. */ body { margin: 0; } /** Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ body { font-family: system-ui, -apple-system, /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; } /* Grouping content ================ */ /** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ } /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /** 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 2. Correct the odd 'em' font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Tabular data ============ */ /** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } /* Forms ===== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** Remove the additional ':invalid' styles in Firefox. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */ :-moz-ui-invalid { box-shadow: none; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; }/** * Manually forked from SUIT CSS Base: https://github.com/suitcss/base * A thin layer on top of normalize.css that provides a starting point more * suitable for web applications. */ /** * Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } button { background-color: transparent; background-image: none; } /** * Work around a Firefox/IE bug where the transparent `button` background * results in a loss of the default `button` focus styles. */ button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } fieldset { margin: 0; padding: 0; } ol, ul { list-style: none; margin: 0; padding: 0; } /** * Tailwind custom reset styles */ /** * 1. Use the user's configured `sans` font-family (with Tailwind's default * sans-serif font stack as a fallback) as a sane default. * 2. Use Tailwind's default "normal" line-height so the user isn't forced * to override it to ensure consistency even when using the default theme. */ html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } /** * Inherit font-family and line-height from `html` so users can set them as * a class directly on the `html` element. */ body { font-family: inherit; line-height: inherit; } /** * 1. Prevent padding and border from affecting element width. * * We used to set this in the html element and inherit from * the parent element for everything else. This caused issues * in shadow-dom-enhanced elements like <details> where the content * is wrapped by a div with box-sizing set to `content-box`. * * https://github.com/mozdevs/cssremedy/issues/4 * * * 2. Allow adding a border to an element by just adding a border-width. * * By default, the way the browser specifies that an element should have no * border is by setting it's border-style to `none` in the user-agent * stylesheet. * * In order to easily add borders to elements by just setting the `border-width` * property, we change the default border-style for all elements to `solid`, and * use border-width to hide them instead. This way our `border` utilities only * need to set the `border-width` property instead of the entire `border` * shorthand, making our border utilities much more straightforward to compose. * * https://github.com/tailwindcss/tailwindcss/pull/116 */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } /* * Ensure horizontal rules are visible by default */ hr { border-top-width: 1px; } /** * Undo the `border-style: none` reset that Normalize applies to images so that * our `border-{width}` utilities have the expected effect. * * The Normalize reset is unnecessary for us since we default the border-width * to 0 on all elements. * * https://github.com/tailwindcss/tailwindcss/issues/362 */ img { border-style: solid; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; color: #9ca3af; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } table { border-collapse: collapse; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /** * Reset links to optimize for opt-in styling instead of * opt-out. */ a { color: inherit; text-decoration: inherit; } /** * Reset form element properties that are easy to forget to * style explicitly so you don't inadvertently introduce * styles that deviate from your design system. These styles * supplement a partial reset that is already applied by * normalize.css. */ button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; } /** * Use the configured 'mono' font family for elements that * are expected to be rendered with a monospace font, falling * back to the system monospace stack if there is no configured * 'mono' font family. */ pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /** * Make replaced elements `display: block` by default as that's * the behavior you want almost all of the time. Inspired by * CSS Remedy, with `svg` added as well. * * https://github.com/mozdevs/cssremedy/issues/14 */ img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } /** * Constrain images and videos to the parent width and preserve * their intrinsic aspect ratio. * * https://github.com/mozdevs/cssremedy/issues/14 */ img, video { max-width: 100%; height: auto; } * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .relative { position: relative; } .absolute { position: absolute; } .bottom-40 { bottom: 10rem; } .bottom-\[40px\] { bottom: 40px; } .left-\[40px\] { left: 40px; } .right-\[40px\] { right: 40px; } .right-\[-40px\] { right: -40px; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-4 { grid-column: span 4 / span 4; } .mx-auto { margin-left: auto; margin-right: auto; } .my-12 { margin-top: 3rem; margin-bottom: 3rem; } .my-8 { margin-top: 2rem; margin-bottom: 2rem; } .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mt-8 { margin-top: 2rem; } .mt-4 { margin-top: 1rem; } .mr-1 { margin-right: 0.25rem; } .ml-1 { margin-left: 0.25rem; } .mr-4 { margin-right: 1rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mb-8 { margin-bottom: 2rem; } .mt-6 { margin-top: 1.5rem; } .mb-5 { margin-bottom: 1.25rem; } .mr-3 { margin-right: 0.75rem; } .mt-0 { margin-top: 0px; } .mb-2 { margin-bottom: 0.5rem; } .ml-2 { margin-left: 0.5rem; } .mb-10 { margin-bottom: 2.5rem; } .ml-4 { margin-left: 1rem; } .block { display: block; } .inline { display: inline; } .flex { display: flex; } .table { display: table; } .grid { display: grid; } .hidden { display: none; } .h-48 { height: 12rem; } .h-8 { height: 2rem; } .h-px { height: 1px; } .h-full { height: 100%; } .h-10 { height: 2.5rem; } .h-56 { height: 14rem; } .h-4 { height: 1rem; } .h-\[720px\] { height: 720px; } .h-\[60vh\] { height: 60vh; } .h-\[20px\] { height: 20px; } .h-\[432px\] { height: 432px; } .h-64 { height: 16rem; } .h-\[480px\] { height: 480px; } .h-\[150px\] { height: 150px; } .h-\[270px\] { height: 270px; } .h-\[50\%\] { height: 50%; } .h-20 { height: 5rem; } .h-16 { height: 4rem; } .max-h-\[20\%\] { max-height: 20%; } .w-48 { width: 12rem; } .w-8 { width: 2rem; } .w-3\/4 { width: 75%; } .w-full { width: 100%; } .w-10 { width: 2.5rem; } .w-4 { width: 1rem; } .w-\[1280px\] { width: 1280px; } .w-1\/2 { width: 50%; } .w-\[470px\] { width: 470px; } .w-\[432px\] { width: 432px; } .w-64 { width: 16rem; } .w-1\/4 { width: 25%; } .w-\[200px\] { width: 200px; } .flex-shrink-0 { flex-shrink: 0; } .transform { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-pointer { cursor: pointer; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-10 { gap: 2.5rem; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .whitespace-nowrap { white-space: nowrap; } .rounded-full { border-radius: 9999px; } .rounded { border-radius: 0.25rem; } .rounded-md { border-radius: 0.375rem; } .rounded-xl { border-radius: 0.75rem; } .border-0 { border-width: 0px; } .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-4 { border-width: 4px; } .border-b-4 { border-bottom-width: 4px; } .border-gray-500 { --tw-border-opacity: 1; border-color: rgba(107, 114, 128, var(--tw-border-opacity)); } .border-prepr { --tw-border-opacity: 1; border-color: rgba(0, 188, 212, var(--tw-border-opacity)); } .border-readless { --tw-border-opacity: 1; border-color: rgba(76, 175, 80, var(--tw-border-opacity)); } .border-escapehotel { --tw-border-opacity: 1; border-color: rgba(141, 110, 99, var(--tw-border-opacity)); } .border-stackoverflow { --tw-border-opacity: 1; border-color: rgba(244, 128, 36, var(--tw-border-opacity)); } .border-red-500 { --tw-border-opacity: 1; border-color: rgba(239, 68, 68, var(--tw-border-opacity)); } .border-blue-500 { --tw-border-opacity: 1; border-color: rgba(59, 130, 246, var(--tw-border-opacity)); } .border-yellow-500 { --tw-border-opacity: 1; border-color: rgba(245, 158, 11, var(--tw-border-opacity)); } .border-white { --tw-border-opacity: 1; border-color: rgba(255, 255, 255, var(--tw-border-opacity)); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); } .bg-gray-400 { --tw-bg-opacity: 1; background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } .bg-gray-800 { --tw-bg-opacity: 1; background-color: rgba(31, 41, 55, var(--tw-bg-opacity)); } .bg-black { --tw-bg-opacity: 1; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); } .bg-\[\#00ff00\] { --tw-bg-opacity: 1; background-color: rgba(0, 255, 0, var(--tw-bg-opacity)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; } .bg-opacity-50 { --tw-bg-opacity: 0.5; } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .fill-current { fill: currentColor; } .p-8 { padding: 2rem; } .p-6 { padding: 1.5rem; } .p-10 { padding: 2.5rem; } .p-\[40px\] { padding: 40px; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .text-center { text-align: center; } .font-GraunaNegra { font-family: GraunaNegra, sans-serif; } .font-InterExtraLight { font-family: InterExtraLight; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-\[39px\] { font-size: 39px; } .text-\[20px\] { font-size: 20px; } .text-\[14px\] { font-size: 14px; } .text-\[37px\] { font-size: 37px; } .text-\[35px\] { font-size: 35px; } .text-\[30px\] { font-size: 30px; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-black { font-weight: 900; } .uppercase { text-transform: uppercase; } .leading-tight { line-height: 1.25; } .tracking-wide { letter-spacing: 0.025em; } .text-gray-900 { --tw-text-opacity: 1; color: rgba(17, 24, 39, var(--tw-text-opacity)); } .text-gray-400 { --tw-text-opacity: 1; color: rgba(156, 163, 175, var(--tw-text-opacity)); } .text-gray-500 { --tw-text-opacity: 1; color: rgba(107, 114, 128, var(--tw-text-opacity)); } .text-gray-600 { --tw-text-opacity: 1; color: rgba(75, 85, 99, var(--tw-text-opacity)); } .text-prepr { --tw-text-opacity: 1; color: rgba(0, 188, 212, var(--tw-text-opacity)); } .text-readless { --tw-text-opacity: 1; color: rgba(76, 175, 80, var(--tw-text-opacity)); } .text-escapehotel { --tw-text-opacity: 1; color: rgba(141, 110, 99, var(--tw-text-opacity)); } .text-stackoverflow { --tw-text-opacity: 1; color: rgba(244, 128, 36, var(--tw-text-opacity)); } .text-red-500 { --tw-text-opacity: 1; color: rgba(239, 68, 68, var(--tw-text-opacity)); } .text-blue-500 { --tw-text-opacity: 1; color: rgba(59, 130, 246, var(--tw-text-opacity)); } .text-yellow-500 { --tw-text-opacity: 1; color: rgba(245, 158, 11, var(--tw-text-opacity)); } .text-white { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } .text-black { --tw-text-opacity: 1; color: rgba(0, 0, 0, var(--tw-text-opacity)); } .underline { text-decoration: underline; } .shadow-xl { --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-500 { transition-duration: 500ms; } .duration { transition-duration: 150ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } body { font-family: "Nunito", sans-serif; } .hover\:text-twitter:hover { --tw-text-opacity: 1; color: rgba(29, 161, 242, var(--tw-text-opacity)); } .hover\:text-black:hover { --tw-text-opacity: 1; color: rgba(0, 0, 0, var(--tw-text-opacity)); } .hover\:text-gray-500:hover { --tw-text-opacity: 1; color: rgba(107, 114, 128, var(--tw-text-opacity)); } .hover\:underline:hover { text-decoration: underline; } .group:hover .group-hover\:text-gray-500 { --tw-text-opacity: 1; color: rgba(107, 114, 128, var(--tw-text-opacity)); } @media (min-width: 768px) { .md\:my-24 { margin-top: 6rem; margin-bottom: 6rem; } .md\:my-12 { margin-top: 3rem; margin-bottom: 3rem; } .md\:h-64 { height: 16rem; } .md\:w-64 { width: 16rem; } .md\:w-1\/2 { width: 50%; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:gap-8 { gap: 2rem; } .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } } @media (min-width: 1024px) { .lg\:p-10 { padding: 2.5rem; } .lg\:px-20 { padding-left: 5rem; padding-right: 5rem; } } @media (prefers-color-scheme: dark) { .dark\:block { display: block; } .dark\:hidden { display: none; } .dark\:bg-gray-900 { --tw-bg-opacity: 1; background-color: rgba(17, 24, 39, var(--tw-bg-opacity)); } .dark\:bg-gray-800 { --tw-bg-opacity: 1; background-color: rgba(31, 41, 55, var(--tw-bg-opacity)); } .dark\:bg-gray-700 { --tw-bg-opacity: 1; background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); } .dark\:bg-black { --tw-bg-opacity: 1; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); } .dark\:text-gray-300 { --tw-text-opacity: 1; color: rgba(209, 213, 219, var(--tw-text-opacity)); } .dark\:shadow-xl-white { --tw-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.25); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dark\:shadow-lg-white { --tw-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dark\:hover\:text-white:hover { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } } @media (prefers-color-scheme: light) { .light\:block { display: block; } .light\:hidden { display: none; } .light\:bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } } :root { --color-code-green: #b5f4a5; --color-code-yellow: #ffe484; --color-code-purple: #d9a9ff; --color-code-red: #ff8383; --color-code-blue: #93ddfd; --color-code-white: #fff; } code[class * =language-], pre[class * =language-] { font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --text-opacity: 1; color: #edf2f7; color: rgba(237, 242, 247, var(--text-opacity)); direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens:none } pre[class * =language-] { overflow: auto; border-radius:.3em } :not(pre) > code[class * =language-], pre[class * =language-] { background:#1d1f21 } :not(pre) > code[class * =language-] { border-radius:.3em } .token.cdata, .token.comment, .token.doctype, .token.prolog { --text-opacity: 1; color: #a0aec0; color:rgba(160, 174, 192, var(--text-opacity)) } .token.punctuation { color:#c5c8c6 } .namespace { opacity:.7 } .token.keyword, .token.property, .token.tag { color:#96cbfe } .token.class-name { color: #ffffb6; text-decoration:underline } .token.boolean, .token.constant { color:#9c9 } .token.deleted, .token.symbol { color:#f92672 } .token.number { color:#ff73fd } .token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string { color:#a8ff60 } .token.variable { color:#c6c5fe } .token.operator { color:#ededed } .token.entity { color:#ffffb6 } .token.url { color:#96cbfe } .language-css .token.string, .style .token.string { color:#87c38a } .token.atrule, .token.attr-value { color:#f9ee98 } .token.function { color:#dad085 } .token.regex { color:#e9c062 } .token.important { color:#fd971f } .token.bold, .token.important { font-weight:700 } .token.italic { font-style:italic } .token.entity { cursor:help } :not(pre) > code[class * =language-], pre[class * =language-] { background: transparent; font-size:.875rem } code[class * =language-], pre[class * =language-] { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; color: var(--color-code-white) !important; -webkit-overflow-scrolling:touch !important } .token.comment { --text-opacity: 1 !important; color: #a0aec0 !important; color:rgba(160, 174, 192, var(--text-opacity)) !important } .token.atrule { color:var(--color-code-white) !important } .token.atrule > .token.property { color:var(--color-code-white) !important } .token.atrule > .token.property + .token.punctuation { color:var(--color-code-white) !important } .token.atrule > .token.property + .token.punctuation + .token.number + .token.unit { color:var(--color-code-white) !important } .token.atrule > .token.number { color:var(--color-code-white) !important } .token.atrule > .token.unit { color:var(--color-code-white) !important } .token.function { color:var(--color-code-blue) !important } .token.number { color:var(--color-code-red) !important } .token.unit { color:var(--color-code-red) !important } .token.punctuation { color:var(--color-code-blue) !important } .token.hexcode { color:var(--color-code-blue) !important } .token.tag { color:var(--color-code-red) !important } .token.attr-name { color:var(--color-code-yellow) !important } .token.attr-value { color:var(--color-code-green) !important } .token.string { color:var(--color-code-green) !important } .token.url { color:var(--color-code-green) !important } .token.selector { color:var(--color-code-yellow) !important } .token.property { color:var(--color-code-yellow) !important } .token.rule { color:var(--color-code-purple) !important } .token.important { font-weight: inherit !important; color:var(--color-code-purple) !important } code.language-js .token.operator, pre.language-js .token.operator { color:var(--color-code-blue) !important } code.language-js .token.punctuation, pre.language-js .token.punctuation { color:var(--color-code-white) !important } code.language-js .token.boolean, pre.language-js .token.boolean { color:var(--color-code-red) !important } code.language-js .token.keyword, pre.language-js .token.keyword { color:var(--color-code-white) !important } code.language-js .token.regex, pre.language-js .token.regex { color:var(--color-code-yellow) !important } code.language-bash .token.function, pre.language-bash .token.function { color:var(--color-code-white) !important } code.language-diff, pre.language-diff { --text-opacity: 1 !important; color: #cbd5e0 !important; color:rgba(203, 213, 224, var(--text-opacity)) !important } code.language-diff .token.deleted, pre.language-diff .token.deleted { color:var(--color-code-red) !important } code.language-diff .token.inserted, pre.language-diff .token.inserted { color:var(--color-code-green) !important } </style> </head> <body> <div class="container mx-auto my-12 md:my-24"> <div class="grid grid-cols-1 gap-2 md:gap-8 px-2 lg:px-20"> <div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-all duration-500 ease-in-out block dark:hidden light:hidden"> <div class="p-8 lg:p-10 border-b-4 border-red-500 h-full"> <div class="flex items-center"> <div class="mr-4"> <svg aria-hidden="true" data-prefix="fal" data-icon="times-hexagon" class="h-10 w-10 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M441.5 39.8C432.9 25.1 417.1 16 400 16H176c-17.1 0-32.9 9.1-41.5 23.8l-112 192c-8.7 14.9-8.7 33.4 0 48.4l112 192c8.6 14.7 24.4 23.8 41.5 23.8h224c17.1 0 32.9-9.1 41.5-23.8l112-192c8.7-14.9 8.7-33.4 0-48.4l-112-192zm84.3 224.3l-112 192c-2.9 4.9-8.2 7.9-13.8 7.9H176c-5.7 0-11-3-13.8-7.9l-112-192c-2.9-5-2.9-11.2 0-16.1l112-192c2.8-5 8.1-8 13.8-8h224c5.7 0 11 3 13.8 7.9l112 192c2.9 5 2.9 11.2 0 16.2zm-143 78.2l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L288 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.7 4.7 4.7 12.3 0 17L313.5 256l69.3 69.3c4.6 4.7 4.6 12.3 0 17z"/> </svg> </div> <div> <div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">No preference detected</div> <div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">Whoops, it seems like your browser doesn't support dark/light mode</div> </div> </div> </div> </div> <div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-all duration-500 ease-in-out hidden dark:block"> <div class="p-8 lg:p-10 border-b-4 border-blue-500 h-full"> <div class="flex items-center"> <div class="mr-4"> <svg aria-hidden="true" data-prefix="fal" data-icon="moon" class="h-10 w-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M448.964 365.617C348.188 384.809 255.14 307.765 255.14 205.419c0-58.893 31.561-112.832 82.574-141.862 25.83-14.7 19.333-53.859-10.015-59.28A258.114 258.114 0 00280.947 0c-141.334 0-256 114.546-256 256 0 141.334 114.547 256 256 256 78.931 0 151.079-35.924 198.85-94.783 18.846-23.22-1.706-57.149-30.833-51.6zM280.947 480c-123.712 0-224-100.288-224-224s100.288-224 224-224c13.984 0 27.665 1.294 40.94 3.745-58.972 33.56-98.747 96.969-98.747 169.674 0 122.606 111.613 214.523 231.81 191.632C413.881 447.653 351.196 480 280.947 480z"/> </svg> </div> <div> <div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">Dark preference detected</div> <div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">Night owl, thank me later for saving your eyes</div> </div> </div> </div> </div> <div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-all duration-500 ease-in-out hidden light:block"> <div class="p-8 lg:p-10 border-b-4 border-yellow-500 h-full"> <div class="flex items-center"> <div class="mr-4"> <svg aria-hidden="true" data-prefix="fal" data-icon="sun" class="h-10 w-10 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 143.7c-61.8 0-112 50.3-112 112.1s50.2 112.1 112 112.1 112-50.3 112-112.1-50.2-112.1-112-112.1zm0 192.2c-44.1 0-80-35.9-80-80.1s35.9-80.1 80-80.1 80 35.9 80 80.1-35.9 80.1-80 80.1zm256-80.1c0-5.3-2.7-10.3-7.1-13.3L422 187l19.4-97.9c1-5.2-.6-10.7-4.4-14.4-3.8-3.8-9.1-5.5-14.4-4.4l-97.8 19.4-55.5-83c-6-8.9-20.6-8.9-26.6 0l-55.5 83-97.8-19.5c-5.3-1.1-10.6.6-14.4 4.4-3.8 3.8-5.4 9.2-4.4 14.4L90 187 7.1 242.5c-4.4 3-7.1 8-7.1 13.3 0 5.3 2.7 10.3 7.1 13.3L90 324.6l-19.4 97.9c-1 5.2.6 10.7 4.4 14.4 3.8 3.8 9.1 5.5 14.4 4.4l97.8-19.4 55.5 83c3 4.5 8 7.1 13.3 7.1s10.3-2.7 13.3-7.1l55.5-83 97.8 19.4c5.4 1.2 10.7-.6 14.4-4.4 3.8-3.8 5.4-9.2 4.4-14.4L422 324.6l82.9-55.5c4.4-3 7.1-8 7.1-13.3zm-116.7 48.1c-5.4 3.6-8 10.1-6.8 16.4l16.8 84.9-84.8-16.8c-6.6-1.4-12.8 1.4-16.4 6.8l-48.1 72-48.1-71.9c-3-4.5-8-7.1-13.3-7.1-1 0-2.1.1-3.1.3l-84.8 16.8 16.8-84.9c1.2-6.3-1.4-12.8-6.8-16.4l-71.9-48.1 71.9-48.2c5.4-3.6 8-10.1 6.8-16.4l-16.8-84.9 84.8 16.8c6.5 1.3 12.8-1.4 16.4-6.8l48.1-72 48.1 72c3.6 5.4 9.9 8.1 16.4 6.8l84.8-16.8-16.8 84.9c-1.2 6.3 1.4 12.8 6.8 16.4l71.9 48.2-71.9 48z"/> </svg> </div> <div> <div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">Lichtpräferenz erkannt</div> <div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">Frühaufsteher, halte es bei strahlendem Sonnenschein</div> </div> </div> </div> </div> <div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-color duration-500 ease-in-out"> <div class="p-8 lg:p-10 border-b-4 border-stackoverflow h-full"> <div class="flex"> <div class="mr-4"> <svg aria-hidden="true" data-prefix="fab" data-icon="stack-overflow" class="h-10 w-10 text-stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"> <path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"/> </svg> </div> <div> <div class="flex uppercase tracking-wide text-sm font-bold text-stackoverflow">Stack Overflow</div> <div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out"> <a class="group cursor-pointer" href="https://stackoverflow.com/a/52986538/9423288" target="_blank"> <span class="underline group-hover:text-gray-500">Dark mode</span> <svg aria-hidden="true" data-prefix="far" data-icon="external-link-square" class="inline h-4 w-4 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 01-6-6V86a6 6 0 016-6h340a6 6 0 016 6v340a6 6 0 01-6 6zm-54-304l-136 .145c-6.627 0-12 5.373-12 12V167.9c0 6.722 5.522 12.133 12.243 11.998l58.001-2.141L99.515 340.485c-4.686 4.686-4.686 12.284 0 16.971l23.03 23.029c4.686 4.686 12.284 4.686 16.97 0l162.729-162.729-2.141 58.001c-.136 6.721 5.275 12.242 11.998 12.242h27.755c6.628 0 12-5.373 12-12L352 140c0-6.627-5.373-12-12-12z"/> </svg> </a> </div> <p class="mt-2 text-gray-600 w-full">Ich bin ein großer Fan des Dunkelmodus, daher empfehle ich jedem, ihn in seiner Webanwendung zu implementieren. Ich habe eine sehr umfassende Antwort auf Stack Overflow..</p> </div> </div> </div> </div> <div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-color duration-500 ease-in-out"> <div class="p-8 lg:p-10 border-b-4 border-gray-500 h-full"> <div class="flex"> <div class="mr-4"> <svg aria-hidden="true" data-prefix="fal" data-icon="code" class="h-10 w-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/> </svg> </div> <div> <div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">CSS pure</div> <div class="mt-2 text-gray-600 w-full grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8 "> <div> <p class="mt-2 text-gray-600 w-full">Media query für <span class="font-black">light</span> modus</p> <pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css">/* Light mode */ @media (prefers-color-scheme: light) { body { background-color: #000; color: white; } }</code></pre> </div> <div> <p class="mt-2 text-gray-600 w-full">Media query für <span class="font-black">dark</span> modus</p> <pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css">/* Dark mode */ @media (prefers-color-scheme: dark) { body { background-color: #000; color: white; } }</code></pre> </div> </div> </div> </div> </div> </div> <div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-color duration-500 ease-in-out"> <div class="p-8 lg:p-10 border-b-4 border-teal-500 h-full"> <div class="flex"> <div class="mr-4"> <svg class="h-10 w-10 block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoMarkGradient)" fill-rule="evenodd"></path> <defs> <linearGradient x1="0%" y1="0%" y2="100%" id="logoMarkGradient"> <stop stop-color="#2298BD"></stop> <stop offset="1" stop-color="#0ED7B5"></stop> </linearGradient> </defs> </svg> </div> <div> <div class="flex uppercase tracking-wide text-sm font-bold text-teal-600">Tailwind CSS Verwendenh</div> <div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">1. installiere Tailwind CSS</div> <p class="mt-2 text-gray-600 w-full">Wenn Sie Tailwind CSS nicht verwenden, würde ich empfehlen, <a href="https://tailwindcss.com/docs/installation" target="_blank" class="underline hover:text-gray-500">die Dokumentation </a> zu lesen und in Betracht zu ziehen, es zu verwenden, es ist verdammt großartig!</p> <div class="block mt-6 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">2. Bearbeiten der tailwind.config.js</div> <p class="mt-2 text-gray-600 w-full">Fügen Sie Folgendes hinzu <a href="https://tailwindcss.com/docs/breakpoints/#dark-mode" target="_blank" class="underline hover:text-gray-500">erweitert</a> zur Tallwind configurations <div class="mt-2 text-white w-full"> <pre class="language-js bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-js">module.exports = { theme: { extend: { screens: { 'dark': {'raw': '(prefers-color-scheme: dark)'}, 'light': {'raw': '(prefers-color-scheme: light)'}, }, } } } </code></pre> <div class="block mt-6 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">3. Erstellen Sie Ihr CSS neu</div> <p class="mt-2 text-gray-600 w-full">Natürlich müssen Sie Ihr CSS <a href="https://tailwindcss.com/docs/installation#4-process-your-css-with-tailwind" target="_blank" class="underline hover:text-gray-500">neu erstellen</a> , aber das hängt von Ihrem Setup ab.</p> <div class="mt-2 text-white w-full grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8 "> <div> <p class="mt-2 text-gray-600 w-full">Tailwind CLI</p> <pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-bash">npx tailwindcss build styles.css -o output.css</code></pre> </div> <div> <p class="mt-2 text-gray-600 w-full">Laravel Mix</p> <pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-bash">npm run production</code></pre> </div> </div> <div class="block mt-6 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">4. Verwendung der Varianten</div> <p class="mt-2 text-gray-600 w-full">Nach Schritt 3 können Sie die folgenden Varianten verwenden <span class="font-black">light:</span> and <span class="font-black">dark:</span></p> <p class="mt-2 text-gray-600 w-full">Default <span class="font-black">light</span> application</p> <pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css">&lt;div class=&quot;bg-white text-black dark:bg-black dark:text-white&quot;&gt;&lt;/div&gt;</code></pre> <p class="mt-2 text-gray-600 w-full">Default <span class="font-black">dark</span> application</p> <pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css">&lt;div class=&quot;bg-black text-white light:bg-white light:text-black&quot;&gt;&lt;/div&gt;</code></pre> </div> </div> </div> </div> </div> </div> </div> <script> /* ********************************************** Begin prism-core.js ********************************************** */ var _self = (typeof window !== 'undefined') ? window // if in browser : ( (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) ? self // if in worker : {} // if in node js ); /** * Prism: Lightweight, robust, elegant syntax highlighting * MIT license http://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */ var Prism = (function (_self){ // Private helper vars var lang = /\blang(?:uage)?-([\w-]+)\b/i; var uniqueId = 0; var _ = { manual: _self.Prism && _self.Prism.manual, disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler, util: { encode: function encode(tokens) { if (tokens instanceof Token) { return new Token(tokens.type, encode(tokens.content), tokens.alias); } else if (Array.isArray(tokens)) { return tokens.map(encode); } else { return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' '); } }, type: function (o) { return Object.prototype.toString.call(o).slice(8, -1); }, objId: function (obj) { if (!obj['__id']) { Object.defineProperty(obj, '__id', { value: ++uniqueId }); } return obj['__id']; }, // Deep clone a language definition (e.g. to extend it) clone: function deepClone(o, visited) { var clone, id, type = _.util.type(o); visited = visited || {}; switch (type) { case 'Object': id = _.util.objId(o); if (visited[id]) { return visited[id]; } clone = {}; visited[id] = clone; for (var key in o) { if (o.hasOwnProperty(key)) { clone[key] = deepClone(o[key], visited); } } return clone; case 'Array': id = _.util.objId(o); if (visited[id]) { return visited[id]; } clone = []; visited[id] = clone; o.forEach(function (v, i) { clone[i] = deepClone(v, visited); }); return clone; default: return o; } }, /** * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class. * * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned. * * @param {Element} element * @returns {string} */ getLanguage: function (element) { while (element && !lang.test(element.className)) { element = element.parentElement; } if (element) { return (element.className.match(lang) || [, 'none'])[1].toLowerCase(); } return 'none'; }, /** * Returns the script element that is currently executing. * * This does __not__ work for line script element. * * @returns {HTMLScriptElement | null} */ currentScript: function () { if (typeof document === 'undefined') { return null; } if ('currentScript' in document) { return document.currentScript; } // IE11 workaround // we'll get the src of the current script by parsing IE11's error stack trace // this will not work for inline scripts try { throw new Error(); } catch (err) { // Get file src url from stack. Specifically works with the format of stack traces in IE. // A stack will look like this: // // Error // at _.util.currentScript (http://localhost/components/prism-core.js:119:5) // at Global code (http://localhost/components/prism-core.js:606:1) var src = (/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(err.stack) || [])[1]; if (src) { var scripts = document.getElementsByTagName('script'); for (var i in scripts) { if (scripts[i].src == src) { return scripts[i]; } } } return null; } } }, languages: { extend: function (id, redef) { var lang = _.util.clone(_.languages[id]); for (var key in redef) { lang[key] = redef[key]; } return lang; }, /** * Insert a token before another token in a language literal * As this needs to recreate the object (we cannot actually insert before keys in object literals), * we cannot just provide an object, we need an object and a key. * @param inside The key (or language id) of the parent * @param before The key to insert before. * @param insert Object with the key/value pairs to insert * @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted. */ insertBefore: function (inside, before, insert, root) { root = root || _.languages; var grammar = root[inside]; var ret = {}; for (var token in grammar) { if (grammar.hasOwnProperty(token)) { if (token == before) { for (var newToken in insert) { if (insert.hasOwnProperty(newToken)) { ret[newToken] = insert[newToken]; } } } // Do not insert token which also occur in insert. See #1525 if (!insert.hasOwnProperty(token)) { ret[token] = grammar[token]; } } } var old = root[inside]; root[inside] = ret; // Update references in other language definitions _.languages.DFS(_.languages, function(key, value) { if (value === old && key != inside) { this[key] = ret; } }); return ret; }, // Traverse a language definition with Depth First Search DFS: function DFS(o, callback, type, visited) { visited = visited || {}; var objId = _.util.objId; for (var i in o) { if (o.hasOwnProperty(i)) { callback.call(o, i, o[i], type || i); var property = o[i], propertyType = _.util.type(property); if (propertyType === 'Object' && !visited[objId(property)]) { visited[objId(property)] = true; DFS(property, callback, null, visited); } else if (propertyType === 'Array' && !visited[objId(property)]) { visited[objId(property)] = true; DFS(property, callback, i, visited); } } } } }, plugins: {}, highlightAll: function(async, callback) { _.highlightAllUnder(document, async, callback); }, highlightAllUnder: function(container, async, callback) { var env = { callback: callback, container: container, selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code' }; _.hooks.run('before-highlightall', env); env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector)); _.hooks.run('before-all-elements-highlight', env); for (var i = 0, element; element = env.elements[i++];) { _.highlightElement(element, async === true, env.callback); } }, highlightElement: function(element, async, callback) { // Find language var language = _.util.getLanguage(element); var grammar = _.languages[language]; // Set language on the element, if not present element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; // Set language on the parent, for styling var parent = element.parentNode; if (parent && parent.nodeName.toLowerCase() === 'pre') { parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; } var code = element.textContent; var env = { element: element, language: language, grammar: grammar, code: code }; function insertHighlightedCode(highlightedCode) { env.highlightedCode = highlightedCode; _.hooks.run('before-insert', env); env.element.innerHTML = env.highlightedCode; _.hooks.run('after-highlight', env); _.hooks.run('complete', env); callback && callback.call(env.element); } _.hooks.run('before-sanity-check', env); if (!env.code) { _.hooks.run('complete', env); callback && callback.call(env.element); return; } _.hooks.run('before-highlight', env); if (!env.grammar) { insertHighlightedCode(_.util.encode(env.code)); return; } if (async && _self.Worker) { var worker = new Worker(_.filename); worker.onmessage = function(evt) { insertHighlightedCode(evt.data); }; worker.postMessage(JSON.stringify({ language: env.language, code: env.code, immediateClose: true })); } else { insertHighlightedCode(_.highlight(env.code, env.grammar, env.language)); } }, highlight: function (text, grammar, language) { var env = { code: text, grammar: grammar, language: language }; _.hooks.run('before-tokenize', env); env.tokens = _.tokenize(env.code, env.grammar); _.hooks.run('after-tokenize', env); return Token.stringify(_.util.encode(env.tokens), env.language); }, tokenize: function(text, grammar) { var rest = grammar.rest; if (rest) { for (var token in rest) { grammar[token] = rest[token]; } delete grammar.rest; } var tokenList = new LinkedList(); addAfter(tokenList, tokenList.head, text); matchGrammar(text, tokenList, grammar, tokenList.head, 0); return toArray(tokenList); }, hooks: { all: {}, add: function (name, callback) { var hooks = _.hooks.all; hooks[name] = hooks[name] || []; hooks[name].push(callback); }, run: function (name, env) { var callbacks = _.hooks.all[name]; if (!callbacks || !callbacks.length) { return; } for (var i=0, callback; callback = callbacks[i++];) { callback(env); } } }, Token: Token }; _self.Prism = _; function Token(type, content, alias, matchedStr, greedy) { this.type = type; this.content = content; this.alias = alias; // Copy of the full string this token was created from this.length = (matchedStr || '').length|0; this.greedy = !!greedy; } Token.stringify = function stringify(o, language) { if (typeof o == 'string') { return o; } if (Array.isArray(o)) { var s = ''; o.forEach(function (e) { s += stringify(e, language); }); return s; } var env = { type: o.type, content: stringify(o.content, language), tag: 'span', classes: ['token', o.type], attributes: {}, language: language }; var aliases = o.alias; if (aliases) { if (Array.isArray(aliases)) { Array.prototype.push.apply(env.classes, aliases); } else { env.classes.push(aliases); } } _.hooks.run('wrap', env); var attributes = ''; for (var name in env.attributes) { attributes += ' ' + name + '="' + (env.attributes[name] || '').replace(/"/g, '&quot;') + '"'; } return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + attributes + '>' + env.content + '</' + env.tag + '>'; }; /** * @param {string} text * @param {LinkedList<string | Token>} tokenList * @param {any} grammar * @param {LinkedListNode<string | Token>} startNode * @param {number} startPos * @param {boolean} [oneshot=false] * @param {string} [target] */ function matchGrammar(text, tokenList, grammar, startNode, startPos, oneshot, target) { for (var token in grammar) { if (!grammar.hasOwnProperty(token) || !grammar[token]) { continue; } var patterns = grammar[token]; patterns = Array.isArray(patterns) ? patterns : [patterns]; for (var j = 0; j < patterns.length; ++j) { if (target && target == token + ',' + j) { return; } var pattern = patterns[j], inside = pattern.inside, lookbehind = !!pattern.lookbehind, greedy = !!pattern.greedy, lookbehindLength = 0, alias = pattern.alias; if (greedy && !pattern.pattern.global) { // Without the global flag, lastIndex won't work var flags = pattern.pattern.toString().match(/[imsuy]*$/)[0]; pattern.pattern = RegExp(pattern.pattern.source, flags + 'g'); } pattern = pattern.pattern || pattern; for ( // iterate the token list and keep track of the current token/string position var currentNode = startNode.next, pos = startPos; currentNode !== tokenList.tail; pos += currentNode.value.length, currentNode = currentNode.next ) { var str = currentNode.value; if (tokenList.length > text.length) { // Something went terribly wrong, ABORT, ABORT! return; } if (str instanceof Token) { continue; } var removeCount = 1; // this is the to parameter of removeBetween if (greedy && currentNode != tokenList.tail.prev) { pattern.lastIndex = pos; var match = pattern.exec(text); if (!match) { break; } var from = match.index + (lookbehind && match[1] ? match[1].length : 0); var to = match.index + match[0].length; var p = pos; // find the node that contains the match p += currentNode.value.length; while (from >= p) { currentNode = currentNode.next; p += currentNode.value.length; } // adjust pos (and p) p -= currentNode.value.length; pos = p; // the current node is a Token, then the match starts inside another Token, which is invalid if (currentNode.value instanceof Token) { continue; } // find the last node which is affected by this match for ( var k = currentNode; k !== tokenList.tail && (p < to || (typeof k.value === 'string' && !k.prev.value.greedy)); k = k.next ) { removeCount++; p += k.value.length; } removeCount--; // replace with the new match str = text.slice(pos, p); match.index -= pos; } else { pattern.lastIndex = 0; var match = pattern.exec(str); } if (!match) { if (oneshot) { break; } continue; } if (lookbehind) { lookbehindLength = match[1] ? match[1].length : 0; } var from = match.index + lookbehindLength, match = match[0].slice(lookbehindLength), to = from + match.length, before = str.slice(0, from), after = str.slice(to); var removeFrom = currentNode.prev; if (before) { removeFrom = addAfter(tokenList, removeFrom, before); pos += before.length; } removeRange(tokenList, removeFrom, removeCount); var wrapped = new Token(token, inside ? _.tokenize(match, inside) : match, alias, match, greedy); currentNode = addAfter(tokenList, removeFrom, wrapped); if (after) { addAfter(tokenList, currentNode, after); } if (removeCount > 1) matchGrammar(text, tokenList, grammar, currentNode.prev, pos, true, token + ',' + j); if (oneshot) break; } } } } /** * @typedef LinkedListNode * @property {T} value * @property {LinkedListNode<T> | null} prev The previous node. * @property {LinkedListNode<T> | null} next The next node. * @template T */ /** * @template T */ function LinkedList() { /** @type {LinkedListNode<T>} */ var head = { value: null, prev: null, next: null }; /** @type {LinkedListNode<T>} */ var tail = { value: null, prev: head, next: null }; head.next = tail; /** @type {LinkedListNode<T>} */ this.head = head; /** @type {LinkedListNode<T>} */ this.tail = tail; this.length = 0; } /** * Adds a new node with the given value to the list. * @param {LinkedList<T>} list * @param {LinkedListNode<T>} node * @param {T} value * @returns {LinkedListNode<T>} The added node. * @template T */ function addAfter(list, node, value) { // assumes that node != list.tail && values.length >= 0 var next = node.next; var newNode = { value: value, prev: node, next: next }; node.next = newNode; next.prev = newNode; list.length++; return newNode; } /** * Removes `count` nodes after the given node. The given node will not be removed. * @param {LinkedList<T>} list * @param {LinkedListNode<T>} node * @param {number} count * @template T */ function removeRange(list, node, count) { var next = node.next; for (var i = 0; i < count && next !== list.tail; i++) { next = next.next; } node.next = next; next.prev = node; list.length -= i; } /** * @param {LinkedList<T>} list * @returns {T[]} * @template T */ function toArray(list) { var array = []; var node = list.head.next; while (node !== list.tail) { array.push(node.value); node = node.next; } return array; } if (!_self.document) { if (!_self.addEventListener) { // in Node.js return _; } if (!_.disableWorkerMessageHandler) { // In worker _self.addEventListener('message', function (evt) { var message = JSON.parse(evt.data), lang = message.language, code = message.code, immediateClose = message.immediateClose; _self.postMessage(_.highlight(code, _.languages[lang], lang)); if (immediateClose) { _self.close(); } }, false); } return _; } //Get current script and highlight var script = _.util.currentScript(); if (script) { _.filename = script.src; if (script.hasAttribute('data-manual')) { _.manual = true; } } function highlightAutomaticallyCallback() { if (!_.manual) { _.highlightAll(); } } if (!_.manual) { // If the document state is "loading", then we'll use DOMContentLoaded. // If the document state is "interactive" and the prism.js script is deferred, then we'll also use the // DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they // might take longer one animation frame to execute which can create a race condition where only some plugins have // been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded. // See https://github.com/PrismJS/prism/issues/2102 var readyState = document.readyState; if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) { document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback); } else { if (window.requestAnimationFrame) { window.requestAnimationFrame(highlightAutomaticallyCallback); } else { window.setTimeout(highlightAutomaticallyCallback, 16); } } } return _; })(_self); if (typeof module !== 'undefined' && module.exports) { module.exports = Prism; } // hack for components to work correctly in node.js if (typeof global !== 'undefined') { global.Prism = Prism; } /* ********************************************** Begin prism-markup.js ********************************************** */ Prism.languages.markup = { 'comment': /<!--[\s\S]*?-->/, 'prolog': /<\?[\s\S]+?\?>/, 'doctype': { pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!<!--)[^"'\]]|"[^"]*"|'[^']*'|<!--[\s\S]*?-->)*\]\s*)?>/i, greedy: true }, 'cdata': /<!\[CDATA\[[\s\S]*?]]>/i, 'tag': { pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i, greedy: true, inside: { 'tag': { pattern: /^<\/?[^\s>\/]+/i, inside: { 'punctuation': /^<\/?/, 'namespace': /^[^\s>\/:]+:/ } }, 'attr-value': { pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i, inside: { 'punctuation': [ /^=/, { pattern: /^(\s*)["']|["']$/, lookbehind: true } ] } }, 'punctuation': /\/?>/, 'attr-name': { pattern: /[^\s>\/]+/, inside: { 'namespace': /^[^\s>\/:]+:/ } } } }, 'entity': /&#?[\da-z]{1,8};/i }; Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] = Prism.languages.markup['entity']; // Plugin to make entity title show the real entity, idea by Roman Komarov Prism.hooks.add('wrap', function(env) { if (env.type === 'entity') { env.attributes['title'] = env.content.replace(/&amp;/, '&'); } }); Object.defineProperty(Prism.languages.markup.tag, 'addInlined', { /** * Adds an inlined language to markup. * * An example of an inlined language is CSS with `<style>` tags. * * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as * case insensitive. * @param {string} lang The language key. * @example * addInlined('style', 'css'); */ value: function addInlined(tagName, lang) { var includedCdataInside = {}; includedCdataInside['language-' + lang] = { pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i, lookbehind: true, inside: Prism.languages[lang] }; includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i; var inside = { 'included-cdata': { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, inside: includedCdataInside } }; inside['language-' + lang] = { pattern: /[\s\S]+/, inside: Prism.languages[lang] }; var def = {}; def[tagName] = { pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'), lookbehind: true, greedy: true, inside: inside }; Prism.languages.insertBefore('markup', 'cdata', def); } }); Prism.languages.xml = Prism.languages.extend('markup', {}); Prism.languages.html = Prism.languages.markup; Prism.languages.mathml = Prism.languages.markup; Prism.languages.svg = Prism.languages.markup; /* ********************************************** Begin prism-css.js ********************************************** */ (function (Prism) { var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/; Prism.languages.css = { 'comment': /\/\*[\s\S]*?\*\//, 'atrule': { pattern: /@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/, inside: { 'rule': /^@[\w-]+/, 'selector-function-argument': { pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/, lookbehind: true, alias: 'selector' } // See rest below } }, 'url': { pattern: RegExp('url\\((?:' + string.source + '|[^\n\r()]*)\\)', 'i'), greedy: true, inside: { 'function': /^url/i, 'punctuation': /^\(|\)$/ } }, 'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'), 'string': { pattern: string, greedy: true }, 'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i, 'important': /!important\b/i, 'function': /[-a-z0-9]+(?=\()/i, 'punctuation': /[(){};:,]/ }; Prism.languages.css['atrule'].inside.rest = Prism.languages.css; var markup = Prism.languages.markup; if (markup) { markup.tag.addInlined('style', 'css'); Prism.languages.insertBefore('inside', 'attr-value', { 'style-attr': { pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i, inside: { 'attr-name': { pattern: /^\s*style/i, inside: markup.tag.inside }, 'punctuation': /^\s*=\s*['"]|['"]\s*$/, 'attr-value': { pattern: /.+/i, inside: Prism.languages.css } }, alias: 'language-css' } }, markup.tag); } }(Prism)); /* ********************************************** Begin prism-clike.js ********************************************** */ Prism.languages.clike = { 'comment': [ { pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: true }, { pattern: /(^|[^\\:])\/\/.*/, lookbehind: true, greedy: true } ], 'string': { pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, greedy: true }, 'class-name': { pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i, lookbehind: true, inside: { 'punctuation': /[.\\]/ } }, 'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/, 'boolean': /\b(?:true|false)\b/, 'function': /\w+(?=\()/, 'number': /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i, 'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/, 'punctuation': /[{}[\];(),.:]/ }; /* ********************************************** Begin prism-javascript.js ********************************************** */ Prism.languages.javascript = Prism.languages.extend('clike', { 'class-name': [ Prism.languages.clike['class-name'], { pattern: /(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/, lookbehind: true } ], 'keyword': [ { pattern: /((?:^|})\s*)(?:catch|finally)\b/, lookbehind: true }, { pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/, lookbehind: true }, ], 'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/, // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444) 'function': /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/, 'operator': /--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/ }); Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/; Prism.languages.insertBefore('javascript', 'keyword', { 'regex': { pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*[\s\S]*?\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/, lookbehind: true, greedy: true }, // This must be declared before keyword because we use "function" inside the look-forward 'function-variable': { pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/, alias: 'function' }, 'parameter': [ { pattern: /(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/, lookbehind: true, inside: Prism.languages.javascript }, { pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i, inside: Prism.languages.javascript }, { pattern: /(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/, lookbehind: true, inside: Prism.languages.javascript }, { pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/, lookbehind: true, inside: Prism.languages.javascript } ], 'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/ }); Prism.languages.insertBefore('javascript', 'string', { 'template-string': { pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/, greedy: true, inside: { 'template-punctuation': { pattern: /^`|`$/, alias: 'string' }, 'interpolation': { pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/, lookbehind: true, inside: { 'interpolation-punctuation': { pattern: /^\${|}$/, alias: 'punctuation' }, rest: Prism.languages.javascript } }, 'string': /[\s\S]+/ } } }); if (Prism.languages.markup) { Prism.languages.markup.tag.addInlined('script', 'javascript'); } Prism.languages.js = Prism.languages.javascript; /* ********************************************** Begin prism-file-highlight.js ********************************************** */ (function () { if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) { return; } /** * @param {Element} [container=document] */ self.Prism.fileHighlight = function(container) { container = container || document; var Extensions = { 'js': 'javascript', 'py': 'python', 'rb': 'ruby', 'ps1': 'powershell', 'psm1': 'powershell', 'sh': 'bash', 'bat': 'batch', 'h': 'c', 'tex': 'latex' }; Array.prototype.slice.call(container.querySelectorAll('pre[data-src]')).forEach(function (pre) { // ignore if already loaded if (pre.hasAttribute('data-src-loaded')) { return; } // load current var src = pre.getAttribute('data-src'); var language, parent = pre; var lang = /\blang(?:uage)?-([\w-]+)\b/i; while (parent && !lang.test(parent.className)) { parent = parent.parentNode; } if (parent) { language = (pre.className.match(lang) || [, ''])[1]; } if (!language) { var extension = (src.match(/\.(\w+)$/) || [, ''])[1]; language = Extensions[extension] || extension; } var code = document.createElement('code'); code.className = 'language-' + language; pre.textContent = ''; code.textContent = 'Loading…'; pre.appendChild(code); var xhr = new XMLHttpRequest(); xhr.open('GET', src, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status < 400 && xhr.responseText) { code.textContent = xhr.responseText; Prism.highlightElement(code); // mark as loaded pre.setAttribute('data-src-loaded', ''); } else if (xhr.status >= 400) { code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText; } else { code.textContent = '✖ Error: File does not exist or is empty'; } } }; xhr.send(null); }); }; document.addEventListener('DOMContentLoaded', function () { // execute inside handler, for dropping Event as argument self.Prism.fileHighlight(); }); })(); </script> <script> Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, /*'break-lines': 80, 'indent': 2, 'remove-initial-line-feed': false, 'tabs-to-spaces': 4, 'spaces-to-tabs': 4*/ }); </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!