-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
- Loading branch information
There are no files selected for viewing
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
html[data-theme="light"] { | ||
@import "https://cdn.jsdelivr.net/npm/[email protected]/tomorrow.css" | ||
} | ||
|
||
html[data-theme="dark"] { | ||
@import "https://cdn.jsdelivr.net/npm/[email protected]/tomorrow-night-blue.min.css" | ||
} | ||
|
||
|
||
.ace_gutter { | ||
z-index: 1; | ||
} | ||
|
||
.pyodide-editor { | ||
width: 100%; | ||
min-height: 200px; | ||
max-height: 400px; | ||
font-size: .85em; | ||
} | ||
|
||
.pyodide-editor-bar { | ||
color: var(--md-primary-bg-color); | ||
background-color: var(--md-primary-fg-color); | ||
width: 100%; | ||
font: monospace; | ||
font-size: 0.75em; | ||
padding: 2px 0 2px; | ||
} | ||
|
||
.pyodide-bar-item { | ||
padding: 0 18px 0; | ||
display: inline-block; | ||
width: 50%; | ||
} | ||
|
||
.pyodide pre { | ||
margin: 0; | ||
} | ||
|
||
.pyodide-output { | ||
width: 100%; | ||
margin-bottom: -15px; | ||
min-height: 46px; | ||
max-height: 400px | ||
} | ||
|
||
.pyodide-clickable { | ||
cursor: pointer; | ||
text-align: right; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
var _sessions = {}; | ||
|
||
function getSession(name, pyodide) { | ||
if (!(name in _sessions)) { | ||
_sessions[name] = pyodide.globals.get("dict")(); | ||
} | ||
return _sessions[name]; | ||
} | ||
|
||
function writeOutput(element, string) { | ||
element.innerHTML += string + '\n'; | ||
} | ||
|
||
function clearOutput(element) { | ||
element.innerHTML = ''; | ||
} | ||
|
||
async function evaluatePython(pyodide, editor, output, session) { | ||
pyodide.setStdout({ batched: (string) => { writeOutput(output, string); } }); | ||
let result, code = editor.getValue(); | ||
clearOutput(output); | ||
try { | ||
result = await pyodide.runPythonAsync(code, { globals: getSession(session, pyodide) }); | ||
} catch (error) { | ||
writeOutput(output, error); | ||
} | ||
if (result) writeOutput(output, result); | ||
hljs.highlightElement(output); | ||
} | ||
|
||
async function initPyodide() { | ||
try { | ||
let pyodide = await loadPyodide(); | ||
await pyodide.loadPackage("micropip"); | ||
return pyodide; | ||
} catch(error) { | ||
return null; | ||
} | ||
} | ||
|
||
function getTheme() { | ||
return document.body.getAttribute('data-md-color-scheme'); | ||
} | ||
|
||
function setTheme(editor, currentTheme, light, dark) { | ||
// https://gist.github.com/RyanNutt/cb8d60997d97905f0b2aea6c3b5c8ee0 | ||
if (currentTheme === "default") { | ||
editor.setTheme("ace/theme/" + light); | ||
document.querySelector(`link[title="light"]`).removeAttribute("disabled"); | ||
document.querySelector(`link[title="dark"]`).setAttribute("disabled", "disabled"); | ||
} else if (currentTheme === "slate") { | ||
editor.setTheme("ace/theme/" + dark); | ||
document.querySelector(`link[title="dark"]`).removeAttribute("disabled"); | ||
document.querySelector(`link[title="light"]`).setAttribute("disabled", "disabled"); | ||
} | ||
} | ||
|
||
function updateTheme(editor, light, dark) { | ||
// Create a new MutationObserver instance | ||
const observer = new MutationObserver((mutations) => { | ||
// Loop through the mutations that occurred | ||
mutations.forEach((mutation) => { | ||
// Check if the mutation was a change to the data-md-color-scheme attribute | ||
if (mutation.attributeName === 'data-md-color-scheme') { | ||
// Get the new value of the attribute | ||
const newColorScheme = mutation.target.getAttribute('data-md-color-scheme'); | ||
// Update the editor theme | ||
setTheme(editor, newColorScheme, light, dark); | ||
} | ||
}); | ||
}); | ||
|
||
// Configure the observer to watch for changes to the data-md-color-scheme attribute | ||
observer.observe(document.body, { | ||
attributes: true, | ||
attributeFilter: ['data-md-color-scheme'], | ||
}); | ||
} | ||
|
||
async function setupPyodide(idPrefix, install = null, themeLight = 'tomorrow', themeDark = 'tomorrow_night', session = null) { | ||
const editor = ace.edit(idPrefix + "editor"); | ||
const run = document.getElementById(idPrefix + "run"); | ||
const clear = document.getElementById(idPrefix + "clear"); | ||
const output = document.getElementById(idPrefix + "output"); | ||
|
||
updateTheme(editor, themeLight, themeDark); | ||
|
||
editor.session.setMode("ace/mode/python"); | ||
setTheme(editor, getTheme(), themeLight, themeDark); | ||
|
||
writeOutput(output, "Initializing..."); | ||
let pyodide = await pyodidePromise; | ||
if (install && install.length) { | ||
micropip = pyodide.pyimport("micropip"); | ||
for (const package of install) | ||
await micropip.install(package); | ||
} | ||
clearOutput(output); | ||
run.onclick = () => evaluatePython(pyodide, editor, output, session); | ||
clear.onclick = () => clearOutput(output); | ||
output.parentElement.parentElement.addEventListener("keydown", (event) => { | ||
if (event.ctrlKey && event.key.toLowerCase() === 'enter') { | ||
event.preventDefault(); | ||
run.click(); | ||
} | ||
}); | ||
} | ||
|
||
var pyodidePromise = initPyodide(); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,143 @@ | ||
|
||
/* Avoid breaking parameter names, etc. in table cells. */ | ||
.doc-contents td code { | ||
word-break: normal !important; | ||
} | ||
|
||
/* No line break before first paragraph of descriptions. */ | ||
.doc-md-description, | ||
.doc-md-description>p:first-child { | ||
display: inline; | ||
} | ||
|
||
/* Max width for docstring sections tables. */ | ||
.doc .md-typeset__table, | ||
.doc .md-typeset__table table { | ||
display: table !important; | ||
width: 100%; | ||
} | ||
|
||
.doc .md-typeset__table tr { | ||
display: table-row; | ||
} | ||
|
||
/* Defaults in Spacy table style. */ | ||
.doc-param-default { | ||
float: right; | ||
} | ||
|
||
/* Parameter headings must be inline, not blocks. */ | ||
.doc-heading-parameter { | ||
display: inline; | ||
} | ||
|
||
/* Prefer space on the right, not the left of parameter permalinks. */ | ||
.doc-heading-parameter .headerlink { | ||
margin-left: 0 !important; | ||
margin-right: 0.2rem; | ||
} | ||
|
||
/* Backward-compatibility: docstring section titles in bold. */ | ||
.doc-section-title { | ||
font-weight: bold; | ||
} | ||
|
||
/* Symbols in Navigation and ToC. */ | ||
:root, :host, | ||
[data-md-color-scheme="default"] { | ||
--doc-symbol-parameter-fg-color: #df50af; | ||
--doc-symbol-attribute-fg-color: #953800; | ||
--doc-symbol-function-fg-color: #8250df; | ||
--doc-symbol-method-fg-color: #8250df; | ||
--doc-symbol-class-fg-color: #0550ae; | ||
--doc-symbol-module-fg-color: #5cad0f; | ||
|
||
--doc-symbol-parameter-bg-color: #df50af1a; | ||
--doc-symbol-attribute-bg-color: #9538001a; | ||
--doc-symbol-function-bg-color: #8250df1a; | ||
--doc-symbol-method-bg-color: #8250df1a; | ||
--doc-symbol-class-bg-color: #0550ae1a; | ||
--doc-symbol-module-bg-color: #5cad0f1a; | ||
} | ||
|
||
[data-md-color-scheme="slate"] { | ||
--doc-symbol-parameter-fg-color: #ffa8cc; | ||
--doc-symbol-attribute-fg-color: #ffa657; | ||
--doc-symbol-function-fg-color: #d2a8ff; | ||
--doc-symbol-method-fg-color: #d2a8ff; | ||
--doc-symbol-class-fg-color: #79c0ff; | ||
--doc-symbol-module-fg-color: #baff79; | ||
|
||
--doc-symbol-parameter-bg-color: #ffa8cc1a; | ||
--doc-symbol-attribute-bg-color: #ffa6571a; | ||
--doc-symbol-function-bg-color: #d2a8ff1a; | ||
--doc-symbol-method-bg-color: #d2a8ff1a; | ||
--doc-symbol-class-bg-color: #79c0ff1a; | ||
--doc-symbol-module-bg-color: #baff791a; | ||
} | ||
|
||
code.doc-symbol { | ||
border-radius: .1rem; | ||
font-size: .85em; | ||
padding: 0 .3em; | ||
font-weight: bold; | ||
} | ||
|
||
code.doc-symbol-parameter { | ||
color: var(--doc-symbol-parameter-fg-color); | ||
background-color: var(--doc-symbol-parameter-bg-color); | ||
} | ||
|
||
code.doc-symbol-parameter::after { | ||
content: "param"; | ||
} | ||
|
||
code.doc-symbol-attribute { | ||
color: var(--doc-symbol-attribute-fg-color); | ||
background-color: var(--doc-symbol-attribute-bg-color); | ||
} | ||
|
||
code.doc-symbol-attribute::after { | ||
content: "attr"; | ||
} | ||
|
||
code.doc-symbol-function { | ||
color: var(--doc-symbol-function-fg-color); | ||
background-color: var(--doc-symbol-function-bg-color); | ||
} | ||
|
||
code.doc-symbol-function::after { | ||
content: "func"; | ||
} | ||
|
||
code.doc-symbol-method { | ||
color: var(--doc-symbol-method-fg-color); | ||
background-color: var(--doc-symbol-method-bg-color); | ||
} | ||
|
||
code.doc-symbol-method::after { | ||
content: "meth"; | ||
} | ||
|
||
code.doc-symbol-class { | ||
color: var(--doc-symbol-class-fg-color); | ||
background-color: var(--doc-symbol-class-bg-color); | ||
} | ||
|
||
code.doc-symbol-class::after { | ||
content: "class"; | ||
} | ||
|
||
code.doc-symbol-module { | ||
color: var(--doc-symbol-module-fg-color); | ||
background-color: var(--doc-symbol-module-bg-color); | ||
} | ||
|
||
code.doc-symbol-module::after { | ||
content: "mod"; | ||
} | ||
|
||
.doc-signature .autorefs { | ||
color: inherit; | ||
border-bottom: 1px dotted currentcolor; | ||
} |
Large diffs are not rendered by default.