adding markdown element and improving api_reference

Dockerfile

@@ -13,4 +13,4 @@ WORKDIR /app
 COPY ./pyproject.toml ./poetry.lock* main.py ./
 RUN poetry install --no-root
 
-CMD python3 -m debugpy --listen 5678 main.py
+CMD python3 -m debugpy --listen 5678 api_reference.py

api_reference.py

@@ -11,28 +11,30 @@ from pygments import highlight
 from pygments.lexers import PythonLexer
 from pygments.formatters import HtmlFormatter
 
-wp.css = HtmlFormatter().get_style_defs('.highlight')
+wp.css = HtmlFormatter().get_style_defs('.codehilite')
 
 @contextmanager
 def example():
     callFrame = inspect.currentframe().f_back.f_back
     begin = callFrame.f_lineno
-    with ui.card():
-        with ui.row():
-            with ui.column():
-                yield
-            callFrame = inspect.currentframe().f_back.f_back
-            end = callFrame.f_lineno
-            code = inspect.getsource(sys.modules[__name__])
-            code = code.splitlines()[begin:end]
-            code = '\n'.join(code)
-            html = highlight(code, PythonLexer(), HtmlFormatter())
-            label = ui.label()
-            label.view.inner_html = html
-            ic(html)
+    with ui.row():
+        with ui.card():
+            yield
+        callFrame = inspect.currentframe().f_back.f_back
+        end = callFrame.f_lineno
+        code = inspect.getsource(sys.modules[__name__])
+        code = code.splitlines()[begin:end]
+        code.insert(0, '```python')
+        code.append('```')
+        code = '\n'.join(code)
+        ui.markdown(code)
 
-with example():
+def describe(element, headline):
+    doc = element.__init__.__doc__
+    ui.markdown(f'### {headline}\n{doc}')
 
+describe(ui.input, 'Text Input')
+with example():
     ui.input(label='Text', on_change=lambda e: result.set_text(e.value))
     ui.number(label='Number', format='%.2f', on_change=lambda e: result.set_text(e.value))
 

nicegui/elements/input.py

@@ -11,7 +11,15 @@ class Input(StringElement):
                  value: str = '',
                  design: str = '',
                  on_change: Callable = None):
+        """Text Input Element.
 
+        Parameters
+        ----------
+        label : str
+            displayed name of the text input
+
+
+        """
         view = jp.QInput(
             label=label,
             placeholder=placeholder,

nicegui/elements/markdown.py

@@ -0,0 +1,28 @@
+import markdown2
+import justpy as jp
+from typing import Union, List
+from .element import Element
+from icecream import ic
+
+class Markdown(Element):
+
+    def __init__(self,
+                 content: str = ''):
+
+        view = jp.Div()
+        view.inner_html = markdown2.markdown(content, extras=['fenced-code-blocks'])
+        super().__init__(view, '')
+
+    @property
+    def text(self):
+
+        return self.view.text
+
+    @text.setter
+    def text(self, text: any):
+
+        self.view.text = text
+
+    def set_text(self, text: str):
+
+        self.text = text

nicegui/ui.py

@@ -5,6 +5,7 @@ class Ui:
     from .elements.icon import Icon as icon
     from .elements.input import Input as input
     from .elements.label import Label as label
+    from .elements.markdown import Markdown as markdown
     from .elements.link import Link as link
     from .elements.number import Number as number
     from .elements.radio import Radio as radio

poetry.lock

@@ -211,6 +211,14 @@ category = "main"
 optional = false
 python-versions = ">=3.6"
 
+[[package]]
+name = "markdown2"
+version = "2.4.0"
+description = "A fast and complete Python implementation of Markdown"
+category = "main"
+optional = false
+python-versions = ">=3.5, <4"
+
 [[package]]
 name = "markupsafe"
 version = "1.1.1"
@@ -370,7 +378,7 @@ python-versions = ">=3.6.1"
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.7"
-content-hash = "d56fa651727b425db52d6d47848f4cb08b032d62c191807b1faff8911fdaa8a2"
+content-hash = "cc5ef26fa759c048c4f3afb686a1ae92096a1889b105e232c3b6777ef4b7cbef"
 
 [metadata.files]
 addict = [
@@ -536,6 +544,10 @@ kiwisolver = [
     {file = "kiwisolver-1.3.1-pp36-pypy36_pp73-win32.whl", hash = "sha256:401a2e9afa8588589775fe34fc22d918ae839aaaf0c0e96441c0fdbce6d8ebe6"},
     {file = "kiwisolver-1.3.1.tar.gz", hash = "sha256:950a199911a8d94683a6b10321f9345d5a3a8433ec58b217ace979e18f16e248"},
 ]
+markdown2 = [
+    {file = "markdown2-2.4.0-py2.py3-none-any.whl", hash = "sha256:8d4ef4a2d090c99532069c4611a9a2b9bea6ae1fa29b6c3727c95d1e31a8f6c5"},
+    {file = "markdown2-2.4.0.tar.gz", hash = "sha256:28d769f0e544e6f68f684f01e9b186747b079a6927d9ca77ebc8c640a2829b1b"},
+]
 markupsafe = [
     {file = "MarkupSafe-1.1.1-cp27-cp27m-macosx_10_6_intel.whl", hash = "sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161"},
     {file = "MarkupSafe-1.1.1-cp27-cp27m-manylinux1_i686.whl", hash = "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7"},

pyproject.toml

@@ -13,6 +13,7 @@ python = "^3.7"
 justpy = "0.1.5"
 matplotlib = "^3.4.1"
 typing-extensions = "^3.10.0"
+markdown2 = "^2.4.0"
 
 [tool.poetry.dev-dependencies]
 icecream = "^2.1.0"