MarkdownAIO

README.md

@@ -18,6 +18,9 @@ The documentation for Dash Labs can be found in the [docs/](./docs/) directory.
 
 
 ### Multi-Page App Docs 
+
+See the [online docs](https://dashlabs.pythonanywhere.com/) made with 'pages/' and the new feature coming soon to dash-labs: `MarkdownAIO` - Markdown that runs code!
+
 _New in dash-labs>=1.0.0:_
   - [08-MultiPageDashApp.md](https://github.com/plotly/dash-labs/blob/main/docs/08-MultiPageDashApp.md)
     - Overview, quickstart apps, reference for the `pages` plug-in

dash_labs/__init__.py

@@ -1,4 +1,6 @@
 from . import plugins
 from .version import __version__
+from .dashdown import MarkdownAIO
+from dash_labs import css
 
 from . util import print_registry

dash_labs/assets/markdownaio.css

@@ -0,0 +1,76 @@
+
+/* styles code in MarkdownAIO with the StackOverflow Light theme */
+.maio-code pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: StackOverflow Light
+  Description: Light theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/
+.maio-code .hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
+
+
+.maio-clipboard {
+    right: 0;
+    position: absolute;
+    top: 0;
+    background-color: #f6f6f6;
+    color: #2f3337;
+    padding: 4px;
+}
+
+/* app output container for executed code */
+.maio-app {
+    padding: 10px;
+    border: 1px solid rgba(100, 100, 100, 0.4);
+}
+
+/* placeholder for the code container */
+.maio-code {
+}
+
+.maio-text {
+  margin-bottom : 50px;
+}
+
+
+/* Responsive layout - makes a one column layout instead of a two-column layout */
+.maio-grid-container {
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fit, minmax(35em, 1fr));
+}
+
+
+
+/* styles code in MarkdownAIO with the StackOverflow Dark theme */
+.maio-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: StackOverflow Dark
+  Description: Dark theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/
+.maio-dark .hljs{color:#fff;background:#1c1b1b}.hljs-subst{color:#fff}.hljs-comment{color:#999}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#88aece}.hljs-attribute{color:#c59bc1}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#f08d49}.hljs-selector-class{color:#88aece}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#b5bd68}.hljs-meta,.hljs-selector-pseudo{color:#88aece}.hljs-built_in,.hljs-literal,.hljs-title{color:#f08d49}.hljs-bullet,.hljs-code{color:#ccc}.hljs-meta .hljs-string{color:#b5bd68}.hljs-deletion{color:#de7176}.hljs-addition{color:#76c490}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
+
+
+.maio-dark-clipboard {
+    right: 0;
+    position: absolute;
+    top: 0;
+    background-color: #1c1b1b;
+    color: white;
+    padding: 4px;
+}

dash_labs/css.py

@@ -0,0 +1,12 @@
+#
+
+# import version  us this to automatically update the verson
+#
+# example from my library of hosing a css file
+# dbc_css = ("https://cdn.jsdelivr.net/gh/AnnMarieW/[email protected]/dbc.min.css")
+
+
+# markdownaio =f"https://cdn.jsdelivr.net/gh/AnnMarieW/[email protected]/dbc.min.css"
+
+# how to use in an app
+# app = dash.Dash(__name__, external_stylesheets=[dl.css.markdownaio])