Skip to content

Commit 9094c4e

Browse files
committed
feat: add code block lnline-color feature.
1 parent 295e3e6 commit 9094c4e

File tree

5 files changed

+153
-6
lines changed

5 files changed

+153
-6
lines changed

Sources/Markdown/Resources/web.bundle/index.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
<head>
44
<title>Markdown Preview</title>
55
<link rel="stylesheet" href="marked.css">
6-
<script type="text/javascript" src="./prism.js"></script>
7-
<script src="./marked.min.js" type="text/javascript" charset="utf-8"></script>
8-
<script src="./copy.js" type="text/javascript"></script>
6+
<link rel="stylesheet" href="plugin.css">
97
</head>
108
<body>
119
<div id="__markdown_preview__" class="markdown-body"></div>
12-
<script src="./main.js" type="text/javascript"></script>
10+
<script type="text/javascript" src="./prism.js"></script>
11+
<script type="text/javascript" src="./plugins/lnline-color.js"></script>
12+
<script type="text/javascript" src="./marked.min.js" charset="utf-8"></script>
13+
<script type="text/javascript" src="./copy.js"></script>
14+
<script type="text/javascript" src="./main.js"></script>
1315
</body>
1416
</html>

Sources/Markdown/Resources/web.bundle/main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// marked.setOptions({
22
// highlight: (code, lang) => {
3-
// const language = Prism.languages[lang];
4-
// if (language) {
3+
// if (lang && Prism.languages[lang]) {
4+
// const language = Prism.languages[lang];
55
// return Prism.highlight(code, language, lang);
66
// }
77
// return code;

Sources/Markdown/Resources/web.bundle/marked.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,6 +504,9 @@ body, html {
504504
.token.rule, .token.regex, .token.important, .token.keyword {
505505
color: var(--color-prettylights-syntax-keyword);
506506
}
507+
.token.coord {
508+
color: var(--color-prettylights-syntax-meta-diff-range);
509+
}
507510
.token.important, .token.bold { font-weight: bold; }
508511
.token.italic { font-style: italic; }
509512
.token.entity { cursor: help; }
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
span.inline-color-wrapper{
2+
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=);
3+
background-position:center;
4+
background-size:110%;
5+
display:inline-block;
6+
height:1.333ch;
7+
width:1.333ch;
8+
margin:0 .333ch;
9+
box-sizing:border-box;
10+
border:1px solid #fff;
11+
outline:1px solid rgba(0,0,0,.5);
12+
overflow:hidden
13+
}
14+
span.inline-color{
15+
display: inline-block;
16+
height: 120%;
17+
width: 120%;
18+
position: relative;
19+
top: -4px;
20+
}
21+
22+
23+
pre.language-diff > code .token.deleted,
24+
pre > code.language-diff .token.deleted {
25+
color: var(--color-prettylights-syntax-carriage-return-bg);
26+
/* background-color:rgba(255,0,0,.1); */
27+
/* background-color: var(--color-prettylights-syntax-comment); */
28+
/* color:inherit;
29+
display:block */
30+
}
31+
pre.language-diff > code .token.inserted,
32+
pre > code.language-diff .token.inserted {
33+
color: var(--color-prettylights-syntax-entity-tag);
34+
/* background-color:rgba(0,255,128,.1); */
35+
/* color:inherit;
36+
display:block */
37+
}
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
(function () {
2+
3+
if (typeof Prism === 'undefined' || typeof document === 'undefined') {
4+
return;
5+
}
6+
7+
// Copied from the markup language definition
8+
var HTML_TAG = /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/g;
9+
10+
// a regex to validate hexadecimal colors
11+
var HEX_COLOR = /^#?((?:[\da-f]){3,4}|(?:[\da-f]{2}){3,4})$/i;
12+
13+
/**
14+
* Parses the given hexadecimal representation and returns the parsed RGBA color.
15+
*
16+
* If the format of the given string is invalid, `undefined` will be returned.
17+
* Valid formats are: `RGB`, `RGBA`, `RRGGBB`, and `RRGGBBAA`.
18+
*
19+
* Hexadecimal colors are parsed because they are not fully supported by older browsers, so converting them to
20+
* `rgba` functions improves browser compatibility.
21+
*
22+
* @param {string} hex
23+
* @returns {string | undefined}
24+
*/
25+
function parseHexColor(hex) {
26+
var match = HEX_COLOR.exec(hex);
27+
if (!match) {
28+
return undefined;
29+
}
30+
hex = match[1]; // removes the leading "#"
31+
32+
// the width and number of channels
33+
var channelWidth = hex.length >= 6 ? 2 : 1;
34+
var channelCount = hex.length / channelWidth;
35+
36+
// the scale used to normalize 4bit and 8bit values
37+
var scale = channelWidth == 1 ? 1 / 15 : 1 / 255;
38+
39+
// normalized RGBA channels
40+
var channels = [];
41+
for (var i = 0; i < channelCount; i++) {
42+
var int = parseInt(hex.substr(i * channelWidth, channelWidth), 16);
43+
channels.push(int * scale);
44+
}
45+
if (channelCount == 3) {
46+
channels.push(1); // add alpha of 100%
47+
}
48+
49+
// output
50+
var rgb = channels.slice(0, 3).map(function (x) {
51+
return String(Math.round(x * 255));
52+
}).join(',');
53+
var alpha = String(Number(channels[3].toFixed(3))); // easy way to round 3 decimal places
54+
55+
return 'rgba(' + rgb + ',' + alpha + ')';
56+
}
57+
58+
/**
59+
* Validates the given Color using the current browser's internal implementation.
60+
*
61+
* @param {string} color
62+
* @returns {string | undefined}
63+
*/
64+
function validateColor(color) {
65+
var s = new Option().style;
66+
s.color = color;
67+
return s.color ? color : undefined;
68+
}
69+
70+
/**
71+
* An array of function which parse a given string representation of a color.
72+
*
73+
* These parser serve as validators and as a layer of compatibility to support color formats which the browser
74+
* might not support natively.
75+
*
76+
* @type {((value: string) => (string|undefined))[]}
77+
*/
78+
var parsers = [
79+
parseHexColor,
80+
validateColor
81+
];
82+
83+
84+
Prism.hooks.add('wrap', function (env) {
85+
if (env.type === 'color' || env.classes.indexOf('color') >= 0) {
86+
var content = env.content;
87+
88+
// remove all HTML tags inside
89+
var rawText = content.split(HTML_TAG).join('');
90+
91+
var color;
92+
for (var i = 0, l = parsers.length; i < l && !color; i++) {
93+
color = parsers[i](rawText);
94+
}
95+
96+
if (!color) {
97+
return;
98+
}
99+
100+
var previewElement = '<span class="inline-color-wrapper"><span class="inline-color" style="background-color:' + color + ';"></span></span>';
101+
env.content = previewElement + content;
102+
}
103+
});
104+
105+
}());

0 commit comments

Comments
 (0)