Use markdown filters in vf-content

components/vf-content/README.md

@@ -2,6 +2,25 @@
 
 ## About
 
+Use this container to get simple support for narrative content where it is not
+practical to assign classes, such as Markdown or WYSIWYG text.
+
+This container adds basic support for `p`, `ul`, `hr`, `a` and other core
+html elements. Some components may also add specific support for `.vf-content`
+
+### Demonstration
+
+<div class="vf-content">
+{{ "#### Sub-header" | marked }}
+
+{% markdown %}
+- list items
+- list items
+- list item [with a link](#)
+- list items
+{% endmarkdown %}
+</div>
+
 ## Installation and Implementation
 
 This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-content` with this command.
@@ -17,10 +36,3 @@ The source files included are written in [Sass](http://sass-lang.com)(`scss`). Y
 ```
 
 _Make sure you import any requirements along with the modules._
-
-
-Use this container to get simple support for narrative content where it is not
-practical to assign classes, such as Markdown or WYSIWYG text.
-
-This container adds basic support for `p`, `ul`, `hr`, `a` and other core
-html elements. Some components may also add specific support for `.vf-content`

components/vf-content/vf-content.njk

 <div class="vf-content">
-  <h1>EMBL communications strategy 2018-2020</h1>
+  {{ "# EMBL communications strategy 2018-2020" | marked }}
   <small>Cian O'Luanaigh, 2 July 2018 at 12:55 pm</small>
   <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
   <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
   <small><i>This document was last revised 7 March 2018</i></small>
 
-  <h2>Section 1: EMBL’s vision and mission</h2>
+  {% markdown %}
+    ## Section 1: EMBL’s vision and mission
 
-  <h3>EMBL’s vision</h3>
-  <p>Enabling scientists worldwide to discover the secrets of life</p>
+    ### EMBL’s vision
 
-  <h3>EMBL’s mission</h3>
-  <ol>
-    <li>Uncovering the molecular basis of life through research</li>
-    <li>Providing research infrastructure and services</li>
-    <li>Training and inspiring the next generation of scientists</li>
-    <li>Driving research, innovation and progress through technology development</li>
-    <li>Interactions with industry and technology transfer</li>
-    <li>Playing a leading role in the integration of life science research</li>
-  </ol>
+    Enabling scientists worldwide to discover the secrets of life
+
+    ### EMBL’s mission
+
+    1. Uncovering the molecular basis of life through research
+    1. Providing research infrastructure and services
+    1. Training and inspiring the next generation of scientists
+    1. Driving research, innovation and progress through technology development
+    1. Interactions with industry and technology transfer
+    1. Playing a leading role in the integration of life science research
+
+  {% endmarkdown %}
 
   <h3>What is EMBL?</h3>
   <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>