-
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add code block lnline-color feature.
- Loading branch information
1 parent
295e3e6
commit 9094c4e
Showing
5 changed files
with
153 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| span.inline-color-wrapper{ | ||
| background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=); | ||
| background-position:center; | ||
| background-size:110%; | ||
| display:inline-block; | ||
| height:1.333ch; | ||
| width:1.333ch; | ||
| margin:0 .333ch; | ||
| box-sizing:border-box; | ||
| border:1px solid #fff; | ||
| outline:1px solid rgba(0,0,0,.5); | ||
| overflow:hidden | ||
| } | ||
| span.inline-color{ | ||
| display: inline-block; | ||
| height: 120%; | ||
| width: 120%; | ||
| position: relative; | ||
| top: -4px; | ||
| } | ||
|
|
||
|
|
||
| pre.language-diff > code .token.deleted, | ||
| pre > code.language-diff .token.deleted { | ||
| color: var(--color-prettylights-syntax-carriage-return-bg); | ||
| /* background-color:rgba(255,0,0,.1); */ | ||
| /* background-color: var(--color-prettylights-syntax-comment); */ | ||
| /* color:inherit; | ||
| display:block */ | ||
| } | ||
| pre.language-diff > code .token.inserted, | ||
| pre > code.language-diff .token.inserted { | ||
| color: var(--color-prettylights-syntax-entity-tag); | ||
| /* background-color:rgba(0,255,128,.1); */ | ||
| /* color:inherit; | ||
| display:block */ | ||
| } |
105 changes: 105 additions & 0 deletions
105
Sources/Markdown/Resources/web.bundle/plugins/lnline-color.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| (function () { | ||
|
|
||
| if (typeof Prism === 'undefined' || typeof document === 'undefined') { | ||
| return; | ||
| } | ||
|
|
||
| // Copied from the markup language definition | ||
| var HTML_TAG = /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/g; | ||
|
|
||
| // a regex to validate hexadecimal colors | ||
| var HEX_COLOR = /^#?((?:[\da-f]){3,4}|(?:[\da-f]{2}){3,4})$/i; | ||
|
|
||
| /** | ||
| * Parses the given hexadecimal representation and returns the parsed RGBA color. | ||
| * | ||
| * If the format of the given string is invalid, `undefined` will be returned. | ||
| * Valid formats are: `RGB`, `RGBA`, `RRGGBB`, and `RRGGBBAA`. | ||
| * | ||
| * Hexadecimal colors are parsed because they are not fully supported by older browsers, so converting them to | ||
| * `rgba` functions improves browser compatibility. | ||
| * | ||
| * @param {string} hex | ||
| * @returns {string | undefined} | ||
| */ | ||
| function parseHexColor(hex) { | ||
| var match = HEX_COLOR.exec(hex); | ||
| if (!match) { | ||
| return undefined; | ||
| } | ||
| hex = match[1]; // removes the leading "#" | ||
|
|
||
| // the width and number of channels | ||
| var channelWidth = hex.length >= 6 ? 2 : 1; | ||
| var channelCount = hex.length / channelWidth; | ||
|
|
||
| // the scale used to normalize 4bit and 8bit values | ||
| var scale = channelWidth == 1 ? 1 / 15 : 1 / 255; | ||
|
|
||
| // normalized RGBA channels | ||
| var channels = []; | ||
| for (var i = 0; i < channelCount; i++) { | ||
| var int = parseInt(hex.substr(i * channelWidth, channelWidth), 16); | ||
| channels.push(int * scale); | ||
| } | ||
| if (channelCount == 3) { | ||
| channels.push(1); // add alpha of 100% | ||
| } | ||
|
|
||
| // output | ||
| var rgb = channels.slice(0, 3).map(function (x) { | ||
| return String(Math.round(x * 255)); | ||
| }).join(','); | ||
| var alpha = String(Number(channels[3].toFixed(3))); // easy way to round 3 decimal places | ||
|
|
||
| return 'rgba(' + rgb + ',' + alpha + ')'; | ||
| } | ||
|
|
||
| /** | ||
| * Validates the given Color using the current browser's internal implementation. | ||
| * | ||
| * @param {string} color | ||
| * @returns {string | undefined} | ||
| */ | ||
| function validateColor(color) { | ||
| var s = new Option().style; | ||
| s.color = color; | ||
| return s.color ? color : undefined; | ||
| } | ||
|
|
||
| /** | ||
| * An array of function which parse a given string representation of a color. | ||
| * | ||
| * These parser serve as validators and as a layer of compatibility to support color formats which the browser | ||
| * might not support natively. | ||
| * | ||
| * @type {((value: string) => (string|undefined))[]} | ||
| */ | ||
| var parsers = [ | ||
| parseHexColor, | ||
| validateColor | ||
| ]; | ||
|
|
||
|
|
||
| Prism.hooks.add('wrap', function (env) { | ||
| if (env.type === 'color' || env.classes.indexOf('color') >= 0) { | ||
| var content = env.content; | ||
|
|
||
| // remove all HTML tags inside | ||
| var rawText = content.split(HTML_TAG).join(''); | ||
|
|
||
| var color; | ||
| for (var i = 0, l = parsers.length; i < l && !color; i++) { | ||
| color = parsers[i](rawText); | ||
| } | ||
|
|
||
| if (!color) { | ||
| return; | ||
| } | ||
|
|
||
| var previewElement = '<span class="inline-color-wrapper"><span class="inline-color" style="background-color:' + color + ';"></span></span>'; | ||
| env.content = previewElement + content; | ||
| } | ||
| }); | ||
|
|
||
| }()); |