Add message formatting and styles to renderer (inline formats, code, urls)

This commit is contained in:
chylex 2016-10-27 16:26:35 +02:00
parent 81a56e4da5
commit b97c483be9
2 changed files with 26 additions and 3 deletions

View File

@ -1,11 +1,12 @@
var DISCORD = (function(){
var REGEX = {
formatBold: /\*\*([\s\S]+?)\*\*(?!\*)/g,
formatItalic: /\/\/([\s\S]+?)\/\/(?!\/)/g,
formatItalic: /\*([\s\S]+?)\*(?!\*)/g,
formatUnderline: /__([\s\S]+?)__(?!_)/g,
formatStrike: /~~([\s\S]+?)~~(?!~)/g,
formatCodeInline: /(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/g,
formatCodeBlock: /```(([A-z0-9\-]+?)\n+)?\n*([^]+?)\n*```/g,
formatCodeInline: /`+\s*([\s\S]*?[^`])\s*\1(?!`)/g,
formatCodeBlock: /```(?:([A-z0-9\-]+?)\n+)?\n*([^]+?)\n*```/g,
formatUrl: /<?(\b(?:https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])>?/ig,
metionRole: /<@&(\d+?)>/g,
metionUser: /<@!?(\d+?)>/g,
mentionChannel: /<#(\d+?)>/g
@ -57,6 +58,18 @@ var DISCORD = (function(){
var date = new Date(value);
return date.toLocaleDateString()+", "+date.toLocaleTimeString();
}
else if (property === "contents"){
var processed = value
.replace(REGEX.formatBold, "<b>$1</b>")
.replace(REGEX.formatItalic, "<i>$1</i>")
.replace(REGEX.formatUnderline, "<u>$1</u>")
.replace(REGEX.formatStrike, "<s>$1</s>")
.replace(REGEX.formatCodeBlock, "<code style='display:block'>$2</code>")
.replace(REGEX.formatCodeInline, "<code>$1</code>")
.replace(REGEX.formatUrl, "<a href='$1' target='_blank' rel='noreferrer'>$1</a>")
return processed;
}
});
}
};

View File

@ -151,3 +151,13 @@ body {
max-width: calc(100vw - 299px);
border-radius: 3px;
}
#messages .message code {
background-color: #2E3136;
border: 2px solid #282B30;
border-radius: 5px;
margin-top: 6px;
padding: 7px;
font-size: 14px;
font-family: Menlo, Consolas, Monaco, monospace;
}