+
+
+ importsomething
+ leta=1
+
+
+
+")
+ fn build_code_tag(&self, attributes: &HashMap) -> String {
+ let data = match attributes.get("class") {
+ Some(lang) => lang.replace("language-", ""),
+ _ => "".to_string(),
+ };
+
+ let parsed_data = CodeFence::from(data.as_str());
+
+ // code-block web component uses codemirror to add syntax highlighting
+ format!(
+ "",
+ if parsed_data.line_numbers {
+ "class='line-numbers'"
+ } else {
+ ""
+ },
+ parsed_data.lang,
+ )
}
}
@@ -847,10 +647,19 @@ impl From<&str> for Admonition {
struct CodeBlock {
time: Option,
title: Option,
+ line_numbers: Option,
}
impl CodeBlock {
fn html(&self, html_type: &str) -> Option {
+ let line_numbers: bool = match &self.line_numbers {
+ Some(val) => match val.as_str() {
+ "true" => true,
+ _ => false,
+ },
+ _ => false,
+ };
+
match html_type {
"time" => self.time.as_ref().map(|time| {
format!(
@@ -866,19 +675,20 @@ impl CodeBlock {
"code" => match &self.title {
Some(title) => Some(format!(
r#"
-
+
{}
"#,
+ if line_numbers { "line-numbers" } else { "" },
title
)),
- None => Some(
+ None => Some(format!(
r#"
-
- "#
- .to_string(),
- ),
+
+ "#,
+ if line_numbers { "line-numbers" } else { "" },
+ )),
},
"results" => match &self.title {
Some(title) => Some(format!(
@@ -940,7 +750,7 @@ pub fn gitbook_preprocess(item: &str) -> String {
pub fn mkdocs<'a>(root: &'a AstNode<'a>, arena: &'a Arena>) -> anyhow::Result<()> {
let mut tabs = Vec::new();
- // tracks open !!! blocks and holds items to apppend prior to closing
+ // tracks openning tags and holds items to apppend prior to closing
let mut info_block_close_items: Vec> = vec![];
iter_nodes(root, &mut |node| {
@@ -1213,7 +1023,12 @@ pub fn mkdocs<'a>(root: &'a AstNode<'a>, arena: &'a Arena>) -> anyho
let title = parser(text.as_ref(), r#"title=""#);
let time = parser(text.as_ref(), r#"time=""#);
- let code_block = CodeBlock { time, title };
+ let line_numbers = parser(text.as_ref(), r#"lineNumbers=""#);
+ let code_block = CodeBlock {
+ time,
+ title,
+ line_numbers,
+ };
if let Some(html) = code_block.html("code") {
let n = arena.alloc(Node::new(RefCell::new(Ast::new(
@@ -1229,7 +1044,11 @@ pub fn mkdocs<'a>(root: &'a AstNode<'a>, arena: &'a Arena>) -> anyho
let parent = node.parent().unwrap();
let title = parser(text.as_ref(), r#"title=""#);
- let code_block = CodeBlock { time: None, title };
+ let code_block = CodeBlock {
+ time: None,
+ title,
+ line_numbers: None,
+ };
if let Some(html) = code_block.html("results") {
let n = arena.alloc(Node::new(RefCell::new(Ast::new(
diff --git a/pgml-dashboard/static/css/scss/components/_admonitions.scss b/pgml-dashboard/static/css/scss/components/_admonitions.scss
index e145e7dc8..6e3dde527 100644
--- a/pgml-dashboard/static/css/scss/components/_admonitions.scss
+++ b/pgml-dashboard/static/css/scss/components/_admonitions.scss
@@ -69,6 +69,9 @@
pre {
margin: 0px;
}
+ pre[data-controller="copy"] {
+ padding-top: 2rem !important;
+ }
div.code-block {
border: none !important;
diff --git a/pgml-dashboard/static/css/scss/components/_code.scss b/pgml-dashboard/static/css/scss/components/_code.scss
index 0545363cd..f7c97f2a0 100644
--- a/pgml-dashboard/static/css/scss/components/_code.scss
+++ b/pgml-dashboard/static/css/scss/components/_code.scss
@@ -64,7 +64,7 @@ pre {
display: inline-block;
width: 100%;
@if $color {
- background-color: $color;
+ background-color: $color !important;
}
}
@@ -110,7 +110,7 @@ pre {
}
.code-line-highlight-none {
@include code-line-highlight(null);
- }
+ }
.code-line-numbers {
@extend .noselect;
diff --git a/pgml-dashboard/static/css/scss/pages/_docs.scss b/pgml-dashboard/static/css/scss/pages/_docs.scss
index ad71f1564..4fca4c7ae 100644
--- a/pgml-dashboard/static/css/scss/pages/_docs.scss
+++ b/pgml-dashboard/static/css/scss/pages/_docs.scss
@@ -178,5 +178,33 @@
margin-right: auto;
}
}
+
+ // Codemirror overrideds
+ .cm-editor {
+ background: inherit;
+
+ // default no line numbers.
+ .cm-gutters {
+ display: none;
+ }
+ }
+
+ .cm-gutters {
+ background: inherit;
+ }
+
+ .code-highlight {
+ background: blue;
+ }
+
+ .cm-activeLine {
+ background-color: transparent;
+ }
+
+ .line-numbers {
+ .cm-gutters {
+ display: contents !important;
+ }
+ }
}
diff --git a/pgml-dashboard/static/js/copy.js b/pgml-dashboard/static/js/copy.js
index a7b45eda5..a5c9ba343 100644
--- a/pgml-dashboard/static/js/copy.js
+++ b/pgml-dashboard/static/js/copy.js
@@ -9,10 +9,19 @@ import {
export default class extends Controller {
codeCopy() {
+
+ // mkdocs / original style code
let text = [...this.element.querySelectorAll('span.code-content')]
.map((copied) => copied.innerText)
.join('\n')
+ // codemirror style code
+ if (text.length === 0 ) {
+ text = [...this.element.querySelectorAll('div.cm-line')]
+ .map((copied) => copied.innerText)
+ .join('\n')
+ }
+
if (text.length === 0) {
text = this.element.innerText.replace('content_copy', '')
}
diff --git a/pgml-dashboard/static/js/utilities/code_mirror_theme.js b/pgml-dashboard/static/js/utilities/code_mirror_theme.js
new file mode 100644
index 000000000..4ec9ca39e
--- /dev/null
+++ b/pgml-dashboard/static/js/utilities/code_mirror_theme.js
@@ -0,0 +1,139 @@
+import { tags as t } from "@lezer/highlight";
+
+// Theme builder is taken from: https://github.com/codemirror/theme-one-dark#readme
+
+const chalky = "#FF0"; // Set
+const coral = "#F5708B"; // Set
+const salmon = "#e9467a";
+const blue = "#00e0ff";
+const cyan = "#56b6c2";
+const invalid = "#ffffff";
+const ivory = "#abb2bf";
+const stone = "#7d8799";
+const malibu = "#61afef";
+const sage = "#0F0"; // Set
+const whiskey = "#d19a66";
+const violet = "#F3F"; // Set
+const darkBackground = "#17181A"; // Set
+const highlightBackground = "#2c313a";
+const background = "#17181A"; // Set
+const tooltipBackground = "#353a42";
+const selection = "#3E4451";
+const cursor = "#528bff";
+
+const editorTheme = {
+ "&": {
+ color: ivory,
+ backgroundColor: background,
+ },
+
+ ".cm-content": {
+ caretColor: cursor,
+ },
+
+ ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
+ "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+ { backgroundColor: selection },
+
+ ".cm-panels": { backgroundColor: darkBackground, color: ivory },
+ ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+ ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+ ".cm-searchMatch": {
+ backgroundColor: "#72a1ff59",
+ outline: "1px solid #457dff",
+ },
+ ".cm-searchMatch.cm-searchMatch-selected": {
+ backgroundColor: "#6199ff2f",
+ },
+
+ ".cm-activeLine": { backgroundColor: "#6699ff0b" },
+ ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+
+ "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+ backgroundColor: "#bad0f847",
+ },
+
+ ".cm-gutters": {
+ backgroundColor: background,
+ color: stone,
+ border: "none",
+ },
+
+ ".cm-activeLineGutter": {
+ backgroundColor: highlightBackground,
+ },
+
+ ".cm-foldPlaceholder": {
+ backgroundColor: "transparent",
+ border: "none",
+ color: "#ddd",
+ },
+
+ ".cm-tooltip": {
+ border: "none",
+ backgroundColor: tooltipBackground,
+ },
+ ".cm-tooltip .cm-tooltip-arrow:before": {
+ borderTopColor: "transparent",
+ borderBottomColor: "transparent",
+ },
+ ".cm-tooltip .cm-tooltip-arrow:after": {
+ borderTopColor: tooltipBackground,
+ borderBottomColor: tooltipBackground,
+ },
+ ".cm-tooltip-autocomplete": {
+ "& > ul > li[aria-selected]": {
+ backgroundColor: highlightBackground,
+ color: ivory,
+ },
+ },
+}
+
+const highlightStyle = [
+ { tag: t.keyword, color: violet },
+ {
+ tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+ color: salmon,
+ },
+ { tag: [t.function(t.variableName), t.labelName], color: malibu },
+ { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+ { tag: [t.definition(t.name), t.separator], color: ivory },
+ {
+ tag: [
+ t.typeName,
+ t.className,
+ t.number,
+ t.changed,
+ t.annotation,
+ t.modifier,
+ t.self,
+ t.namespace,
+ ],
+ color: chalky,
+ },
+ {
+ tag: [
+ t.operator,
+ t.operatorKeyword,
+ t.url,
+ t.escape,
+ t.regexp,
+ t.link,
+ t.special(t.string),
+ ],
+ color: blue,
+ },
+ { tag: [t.meta, t.comment], color: stone },
+ { tag: t.strong, fontWeight: "bold" },
+ { tag: t.emphasis, fontStyle: "italic" },
+ { tag: t.strikethrough, textDecoration: "line-through" },
+ { tag: t.link, color: stone, textDecoration: "underline" },
+ { tag: t.heading, fontWeight: "bold", color: salmon },
+ { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+ { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+ { tag: t.invalid, color: invalid },
+]
+
+
+export {highlightStyle, editorTheme};
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: