https://github.com/loredanacirstea
https://twitter.com/lorecirstea
Published
Edited
Dec 18, 2019
md`# Hilight`
prism = require('https://bundle.run/prismjs@1.17.1')
{
yield html `<style>${solarized}</style><pre class="line-numbers" id="editor" style="white-space:pre-wrap;"><code class="language-rust" id="editor-code"></code>
<textarea id="editor-content" style="overflow:hidden">fn some(x){
//some line
}
function some(x){
//some line
}
</textarea>
</pre>
<style>
#editor {
position: relative;
}
#editor-content {
color: rgba(113,113,113,0.4);
background-color: rgba(113,113,113,0.0);
border: none;
position: absolute;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
tab-size: 4;
top: -1px;
left: -3px;
line-height: 1.5;
right: 1em;
bottom: 1em;
width: calc(100% - 2em);
height: calc(100% - 2em);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#editor-content {
caret-color: rgba(0, 0, 0, 1) !important;
webkit-box-sizing: none;
}
#editor-content:focus {
outline-offset: none;
outline: -webkit-focus-ring-color auto 0px;
}
</style>`
doi()
}
doi()
function doi() {
var editorCode = document.getElementById('editor-code');
var editorContent = document.getElementById('editor-content');
//var selector = document.getElementById('selector');
editorCode.innerHTML = prism.highlight(editorContent.value, prism.languages.rust);
editorContent.addEventListener('keyup',function() {
editorCode.innerHTML = prism.highlight(this.value, prism.languages.rust);
})
function chc(e) {
//console.log( editorContent.selectionStart)
if ( editorContent.selectionStart >= editorContent.value.length-1) {
console.log("nnno")
editorContent.selectionStart = editorContent.value.length-1;
editorContent.value = editorContent.value + "\n"
e.preventDefault()
editorContent.value = editorContent.value.substring(0, editorContent.value.length-1)
}
}
editorContent.addEventListener('keydown', chc)
editorContent.addEventListener('click', chc)
editorContent.addEventListener('focus', chc)
}
solarized = `/* PrismJS 1.17.1
https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+rust+solidity */
/*
Solarized Color Schemes originally by Ethan Schoonover
http://ethanschoonover.com/solarized
Ported for PrismJS by Hector Matos
Website: https://krakendev.io
Twitter Handle: https://twitter.com/allonsykraken)
*/
/*
SOLARIZED HEX
--------- -------
base03 #002b36
base02 #073642
base01 #586e75
base00 #657b83
base0 #839496
base1 #93a1a1
base2 #eee8d5
base3 #fdf6e3
yellow #b58900
orange #cb4b16
red #dc322f
magenta #d33682
violet #6c71c4
blue #268bd2
cyan #2aa198
green #859900
*/
code[class*="language-"],
pre[class*="language-"] {
color: #657b83; /* base00 */
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: #073642; /* base02 */
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #073642; /* base02 */
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-color: #fdf6e3; /* base3 */
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #93a1a1; /* base1 */
}
.token.punctuation {
color: #586e75; /* base01 */
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #268bd2; /* blue */
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.url,
.token.inserted {
color: #2aa198; /* cyan */
}
.token.entity {
color: #657b83; /* base00 */
background: #eee8d5; /* base2 */
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #859900; /* green */
}
.token.function,
.token.class-name {
color: #b58900; /* yellow */
}
.token.regex,
.token.important,
.token.variable {
color: #cb4b16; /* orange */
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
`
{
prism.languages.rust = {
'comment': [
{
pattern: /(^|[^\\])\/\*[\s\S]*?\*\//,
lookbehind: true
},
{
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: true
}
],
'string': [
{
pattern: /b?r(#*)"(?:\\.|(?!"\1)[^\\\r\n])*"\1/,
greedy: true
},
{
pattern: /b?"(?:\\.|[^\\\r\n"])*"/,
greedy: true
}
],
'char': {
pattern: /b?'(?:\\(?:x[0-7][\da-fA-F]|u{(?:[\da-fA-F]_*){1,6}|.)|[^\\\r\n\t'])'/,
alias: 'string'
},
'lifetime-annotation': {
pattern: /'[^\s>']+/,
alias: 'symbol'
},
'keyword': /\b(?:abstract|alignof|as|async|await|be|box|break|const|continue|crate|do|dyn|else|enum|extern|false|final|fn|for|if|impl|in|let|loop|match|mod|move|mut|offsetof|once|override|priv|pub|pure|ref|return|sizeof|static|self|Self|struct|super|true|trait|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,
'attribute': {
pattern: /#!?\[.+?\]/,
greedy: true,
alias: 'attr-name'
},
'function': [
/\w+(?=\s*\()/,
// Macros can use parens or brackets
/\w+!(?=\s*\(|\[)/
],
'macro-rules': {
pattern: /\w+!/,
alias: 'function'
},
// Hex, oct, bin, dec numbers with visual separators and type suffix
'number': /\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:\d(?:_?\d)*)?\.?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:[iu](?:8|16|32|64)?|f32|f64))?\b/,
// Closure params should not be confused with bitwise OR |
'closure-params': {
pattern: /\|[^|]*\|(?=\s*[{-])/,
inside: {
'punctuation': /[|:,]/,
'operator': /[&*]/
}
},
'punctuation': /->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,
'operator': /[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<<?=?|>>?=?|[@?]/
};
prism.languages.solidity = prism.languages.extend('clike', {
'class-name': {
pattern: /(\b(?:contract|enum|interface|library|new|struct|using)\s+)(?!\d)[\w$]+/,
lookbehind: true
},
'keyword': /\b(?:_|anonymous|as|assembly|assert|break|calldata|case|constant|constructor|continue|contract|default|delete|do|else|emit|enum|event|external|for|from|function|if|import|indexed|inherited|interface|internal|is|let|library|mapping|memory|modifier|new|payable|pragma|private|public|pure|require|returns?|revert|selfdestruct|solidity|storage|struct|suicide|switch|this|throw|using|var|view|while)\b/,
'operator': /=>|->|:=|=:|\*\*|\+\+|--|\|\||&&|<<=?|>>=?|[-+*/%^&|<>!=]=?|[~?]/
});
prism.languages.insertBefore('solidity', 'keyword', {
'builtin': /\b(?:address|bool|string|u?int(?:8|16|24|32|40|48|56|64|72|80|88|96|104|112|120|128|136|144|152|160|168|176|184|192|200|208|216|224|232|240|248|256)?|byte|bytes(?:[1-9]|[12]\d|3[0-2])?)\b/
});
prism.languages.insertBefore('solidity', 'number', {
'version': {
pattern: /([<>]=?|\^)\d+\.\d+\.\d+\b/,
lookbehind: true,
alias: 'number',
}
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
