{"id":15288064,"url":"https://github.com/linxueyuanstdio/streamlit-markdown","last_synced_at":"2025-04-13T06:32:06.365Z","repository":{"id":243200827,"uuid":"809430950","full_name":"LinXueyuanStdio/streamlit-markdown","owner":"LinXueyuanStdio","description":"a streaming markdown component for streamlit with LaTeX, Mermaid, Table, code support. A drop-in replacement for st.markdown.","archived":false,"fork":false,"pushed_at":"2025-02-17T08:13:11.000Z","size":5682,"stargazers_count":15,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T23:11:18.989Z","etag":null,"topics":["latex","mermaid","react-markdown","streamlit","streamlit-component"],"latest_commit_sha":null,"homepage":"https://streaming-markdown.streamlit.app/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinXueyuanStdio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-02T17:05:13.000Z","updated_at":"2025-02-17T08:13:15.000Z","dependencies_parsed_at":"2024-06-07T10:16:49.605Z","dependency_job_id":"c17a1bbc-8346-4234-bb20-d5e0add660a4","html_url":"https://github.com/LinXueyuanStdio/streamlit-markdown","commit_stats":null,"previous_names":["linxueyuanstdio/streamlit-markdown"],"tags_count":0,"template":false,"template_full_name":"LinXueyuanStdio/streamlit-diff-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2Fstreamlit-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2Fstreamlit-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2Fstreamlit-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2Fstreamlit-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinXueyuanStdio","download_url":"https://codeload.github.com/LinXueyuanStdio/streamlit-markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248674659,"owners_count":21143760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["latex","mermaid","react-markdown","streamlit","streamlit-component"],"created_at":"2024-09-30T15:44:00.816Z","updated_at":"2025-04-13T06:32:06.343Z","avatar_url":"https://github.com/LinXueyuanStdio.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# streamlit-markdown\n\nreact-markdown with streaming support for streamlit webapp.\n\n![](./docs/streamlit-markdown.gif)\n\n- [x] streaming rendering of markdown text\n- [x] support for latex math, mermaid diagrams, code highlighting\n- [x] support for tables, images, links\n\n\u003e Have a try at https://streaming-markdown.streamlit.app/\n\n![](./docs/screenshot.png)\n\n## Installation\n\n```bash\npip install streamlit-markdown\n```\n\n## Usage\n\nstatic content:\n\n```python\nfrom streamlit_markdown import st_markdown\n\nmarkdown_text = \"$ y = f(x)$\"\nst_markdown(markdown_text)\n```\n\nstreaming content:\n\n```python\nfrom streamlit_markdown import st_streaming_markdown\n\nmarkdown_text = \"$ y = f(x)$\"\ndef token_stream():\n    for token in markdown_text:\n        yield token\nst_streaming_markdown(token_stream, key=\"token_stream\") # key must be set to prevent re-rendering\n```\n\ncombined streaming content:\n\n```python\nfrom streamlit_markdown import st_streaming_markdown\n\nmarkdown_text = \"$ y = f(x)$\"\ndef token_stream():\n    import random\n    for token in markdown_text:\n        if random.rand() \u003e 0.5:\n            yield token\n        else:\n            def callable_token():\n                return token\n            yield callable_token\nst_streaming_markdown(token_stream, key=\"token_stream\") # key must be set to prevent re-rendering\n```\n\nrun example:\n\n```bash\nstreamlit run example.py\n```\n\n![img.png](./docs/a.png)\n![img.png](./docs/b.png)\n\n## Advanced Usage\n\nThere are 3 ways for Style Customization!\n\n### Select another theme_color\n\n```\nGLOBAL_THEME_COLOR = Literal[\"blue\", \"orange\", \"green\", \"red\", \"purple\", \"pink\", \"indigo\", \"yellow\", \"teal\", \"cyan\", \"gray\", \"slate\", \"dark\", \"light\", \"null\", \"custom\"]\nMERMAID_THEME = Literal[\"default\", \"forest\", \"dark\", \"neutral\", \"base\"]\n```\n\nI have annotated the type. You should be able to see a type hint if you are using `vscode+pylance`:\n\n![](./docs/vscode_type_hint.png)\n\n\n### Let theme_color == \"custom\" and specific custom_color\n\nIn this way, you can control the color of border and text separately.\n\nThe value follows the color naming of Tailwind CSS.\n\n```python\ncustom_color = {\n    \"bg\": \"bg-gray-100\",\n    \"border\": \"border-gray-300\",\n    \"text\": \"text-green-900\",\n    \"hover_bg\": \"hover:bg-gray-200\",\n    \"hover_text\": \"hover:text-gray-900\",\n}\nfinal_content = st_markdown(\n    content,\n    theme_color=\"custom\",\n    mermaid_theme=mermaid_theme,\n    mermaid_theme_CSS=None,\n    custom_color=custom_color,\n    custom_css=None,\n    key=\"content\",\n)\n```\n\n### Specific custom_css\n\nBy this way, the value of custom_css dict should be empty string (at least, not None).\nIf the value is empty string, it will be ignored and theme_color system will be used when rendering the type of markdown block html.\nOtherwise, the custom css value will replace all the class style of the html element.\nUse it at your own risk!\n\nThe inner code is like:\n\n```jsx\n\u003ca className={\ncustom_css.a_class.length \u003e 0 ? custom_css.a_class : classNames(\n    classNameByTheme(theme_color, [\"text\", \"hover_text\"], custom_color),\n)\n} /\u003e\n```\n\n\n```python\ncustom_css = {\n    \"a_class\": \"text-green-900 border-grey-900 hover:text-gray-900\",\n    \"h1_class\": \"\",\n    \"h2_class\": \"\",\n    \"h3_class\": \"\",\n    \"h4_class\": \"\",\n    \"h5_class\": \"\",\n    \"h6_class\": \"\",\n    \"p_class\": \"\",\n    \"strong_class\": \"\",\n    \"em_class\": \"\",\n    \"code_class\": \"\",\n    \"code_button_class\": \"\",\n    \"code_latex_class\": \"\",\n    \"code_mermaid_class\": \"\",\n    \"pre_class\": \"\",\n    \"ul_class\": \"\",\n    \"ol_class\": \"\",\n    \"li_class\": \"\",\n    \"table_class\": \"\",\n    \"thead_class\": \"\",\n    \"th_class\": \"\",\n    \"td_class\": \"\",\n    \"blockquote_class\": \"\",\n}\nfinal_content = st_markdown(\n    content,\n    theme_color=\"custom\",\n    mermaid_theme=mermaid_theme,\n    mermaid_theme_CSS=None,\n    custom_color=None,\n    custom_css=custom_css,\n    key=\"content\",\n)\n```\n\n\n## Building from source\n\n### Prerequisites\n\n- nodejs \u003e= 18.x\n- yarn \u003e= 1.22.x\n- poetry \u003e= 1.2.x\n- python \u003e= 3.8.x\n\n### Building\n\n```bash\n./build.sh\n```\n\n### Publishing\n\n```bash\npoetry publish\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinxueyuanstdio%2Fstreamlit-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinxueyuanstdio%2Fstreamlit-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinxueyuanstdio%2Fstreamlit-markdown/lists"}