Fix table in markdown and use dsfr table style (#432)

* feat: handle dsfr table in markdown

* fix: qa

CHANGELOG.md

@@ -33,6 +33,7 @@
 ## 4.0.1 (2024-04-26)
 
 - Update footer
+- Fix markdown tables and use DSFR ones [#432](https://github.com/datagouv/udata-front/pull/432)
 
 ## 4.0.0 (2024-04-23)
 

udata_front/frontend/__init__.py

@@ -7,6 +7,7 @@
 # included for retro-compatibility reasons (some plugins may import from here instead of udata)
 from udata.frontend import template_hook # noqa
 from udata.i18n import I18nBlueprint
+from .markdown import init_app as init_markdown
 
 nav = Navigation()
 oauth = OAuth()
@@ -43,6 +44,7 @@ def init_app(app):
 
  nav.init_app(app)
  theme.init_app(app)
+ init_markdown(app)
 
  from . import helpers, error_handlers, menu_helpers, resource_helpers # noqa
 

udata_front/frontend/markdown.py

@@ -0,0 +1,22 @@
+from udata.frontend.markdown import mistune, UDataMarkdown
+
+
+class Renderer(mistune.Renderer):
+ def table(self, header, body):
+ return (
+ '<div class=\"fr-table\">\n<table>\n<thead>\n%s</thead>\n'
+ '<tbody>\n%s</tbody>\n</table>\n</div>\n'
+ ) % (header, body)
+
+
+class UDataFrontMarkdown(UDataMarkdown):
+ """Consistent with Flask's extensions signature."""
+
+ def __init__(self, app):
+ app.jinja_env.filters['markdown'] = self.__call__
+ renderer = Renderer(escape=False, hard_wrap=True)
+ self.markdown = mistune.Markdown(renderer=renderer)
+
+
+def init_app(app):
+ app.extensions['markdown'] = UDataFrontMarkdown(app)

udata_front/theme/gouvfr/assets/less/components/markdown.less

@@ -140,6 +140,9 @@ Content on the site can be styled with Markdown. Ready made styles are provided
  tr:nth-child(odd) {
  background-color: @grey-125;
  }
+ }
+
+ .fr-table tbody:only-child {
  & > :first-child {
  &:extend(.fr-table thead);
  }