diff --git a/examples/example-markdown.md b/examples/example-markdown.md index 6cfc2b44..b4edb0e1 100644 --- a/examples/example-markdown.md +++ b/examples/example-markdown.md @@ -23,7 +23,7 @@ Hi from a Markdown container containing Norwegian letters (æ ø å), some #### An image with a caption -![Alt text](./example_banner.png "Some caption") +![width=40%,height=300px](./example_banner.png "Some caption") #### Quote diff --git a/webviz_config/containers/_markdown.py b/webviz_config/containers/_markdown.py index 51e720dc..64c07d3d 100644 --- a/webviz_config/containers/_markdown.py +++ b/webviz_config/containers/_markdown.py @@ -45,10 +45,21 @@ def handleMatch(self, match, data): url = webviz_assets.add(image_path) + image_style = '' + for style_prop in image.get('alt').split(','): + prop, value = style_prop.split('=') + if prop == 'width': + image_style += f'width: {value};' + elif prop == 'height': + image_style += f'height: {value};' + + if image_style: + image.set('style', image_style) + image.set('src', url) image.set('class', '_markdown_image') - container = etree.Element('span', attrib={'style': 'display: block'}) + container = etree.Element('span') container.append(image) etree.SubElement(container, @@ -62,6 +73,13 @@ def handleMatch(self, match, data): class Markdown(WebvizContainer): '''### Include Markdown +_Note:_ The markdown syntax for images has been extended to support +(optionally) providing width and/or height for individual images. +To specify the dimensions write e.g. +```markdown +![width=40%,height=300px](./example_banner.png "Some caption") +``` + This container renders and includes the content from a Markdown file. Images are supported, and should in the markdown file be given as either relative paths to the markdown file itself, or absolute paths. @@ -80,10 +98,12 @@ class Markdown(WebvizContainer): ALLOWED_ATTRIBUTES = { '*': ['id', 'class', 'style'], - 'img': ['src', 'alt', 'title'], + 'img': ['src', 'alt', 'title', 'style'], 'a': ['href', 'alt', 'title'] } + ALLOWED_STYLES = ['width', 'height'] + def __init__(self, markdown_file: Path): self.html = bleach.clean( markdown.markdown( @@ -93,8 +113,9 @@ def __init__(self, markdown_file: Path): _WebvizMarkdownExtension( base_path=markdown_file.parent )]), - Markdown.ALLOWED_TAGS, - Markdown.ALLOWED_ATTRIBUTES + tags=Markdown.ALLOWED_TAGS, + attributes=Markdown.ALLOWED_ATTRIBUTES, + styles=Markdown.ALLOWED_STYLES ) @property