diff --git a/Example2.png b/Example2.png new file mode 100644 index 0000000..db7c0ef Binary files /dev/null and b/Example2.png differ diff --git a/README.md b/README.md index 9fac043..113b430 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,65 @@ This project is heavily inspired by [markmap](https://github.com/markmap/markma --- -### Installation +### Use +#### Direct add such code in your streamlit code. +```python +import streamlit.components.v1 as components + +def markmap(data, height=600): + data = str(data) + markdown_style = ''' + '''.format(height) + markdown_html = f''' + {markdown_style} +
+ + +
+ ''' + + markmap_component = components.html(markdown_html, height=height) + return markmap_component +``` + +#### Install from PyPI [Need Upgrade to New Version] ``` pip install streamlit-markmap==1.0.1 ``` +and modify the function `markmap` as follows: +```python +def markmap(data, height=600): + data = str(data) + markdown_style = ''' + '''.format(height) + markdown_html = f''' + {markdown_style} +
+ + +
+ ''' + + markmap_component = components.html(markdown_html, height=height) + return markmap_component +``` + ### Example ##### 1、a simple case @@ -40,7 +93,7 @@ markmap(md,height=400) This example is a reference to the [markmap](https://markmap.js.org/repl) website, and as it is not known whether a declaration is required to use the markmap project, feel free to add one if you wish. -![image-20230202215117681](https://cdn.jsdelivr.net/gh/echoopen/echoimage/img/image-20230202215117681.png) +![Example2](Example2.png) ~~~python import streamlit as st @@ -48,40 +101,62 @@ from streamlit_markmap import markmap st.set_page_config(page_title="markmap", layout="wide") + + +st.write('## example1') +with open('markdown_data/data.md', encoding='utf-8') as fp: + md = fp.read() + +markmap(md,height=400) + +st.write('## example2') data = ''' --- +title: markmap markmap: + maxWidth: 200 colorFreezeLevel: 2 + initialExpandLevel: 4 --- -# markmap - ## Links -- +- [Website](https://markmap.js.org/) - [GitHub](https://github.com/gera2ld/markmap) ## Related Projects -- [coc-markmap](https://github.com/gera2ld/coc-markmap) -- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) +- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim +- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode +- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs ## Features -- links +Note that if blocks and lists appear at the same level, the lists will be ignored. + +### Lists + - **strong** ~~del~~ *italic* ==highlight== -- multiline - text - `inline code` -- - ```js - console.log('code block'); - ``` -- Katex - - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ +- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md) -- Now we can wrap very very very very long text based on `maxWidth` option +- Now we can wrap very very very very long text based on `maxWidth` option or `
` tag. +- Ordered list + 1. item 1 + 2. item 2 + +### Blocks + +```js +console.log('hello, JavaScript') +``` + +| Products | Price | +|-|-| +| Apple | 4 | +| Banana | 2 | +![](/favicon.png) ''' markmap(data, height=400) diff --git a/app.py b/app.py index 772e903..d033c22 100644 --- a/app.py +++ b/app.py @@ -14,38 +14,51 @@ st.write('## example2') data = ''' --- +title: markmap markmap: + maxWidth: 200 colorFreezeLevel: 2 + initialExpandLevel: 4 --- -# markmap - ## Links -- +- [Website](https://markmap.js.org/) - [GitHub](https://github.com/gera2ld/markmap) ## Related Projects -- [coc-markmap](https://github.com/gera2ld/coc-markmap) -- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) +- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim +- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode +- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs ## Features -- links +Note that if blocks and lists appear at the same level, the lists will be ignored. + +### Lists + - **strong** ~~del~~ *italic* ==highlight== -- multiline - text - `inline code` -- - ```js - console.log('code block'); - ``` -- Katex - - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ +- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md) -- Now we can wrap very very very very long text based on `maxWidth` option +- Now we can wrap very very very very long text based on `maxWidth` option or `
` tag. +- Ordered list + 1. item 1 + 2. item 2 + +### Blocks + +```js +console.log('hello, JavaScript') +``` + +| Products | Price | +|-|-| +| Apple | 4 | +| Banana | 2 | +![](/favicon.png) ''' markmap(data, height=400) diff --git a/streamlit_markmap/__init__.py b/streamlit_markmap/__init__.py index 8616c6d..56ac35c 100644 --- a/streamlit_markmap/__init__.py +++ b/streamlit_markmap/__init__.py @@ -11,9 +11,12 @@ def markmap(data, height=600): '''.format(height) markdown_html = f''' {markdown_style} - - -
{data}
+
+ + +
''' markmap_component = components.html(markdown_html, height=height) diff --git a/streamlit_markmap/__pycache__/__init__.cpython-312.pyc b/streamlit_markmap/__pycache__/__init__.cpython-312.pyc new file mode 100644 index 0000000..380b386 Binary files /dev/null and b/streamlit_markmap/__pycache__/__init__.cpython-312.pyc differ