Add an example showing how to wrap Org headings in HTML tags

Ref: #160
kaushalmodi · May 8, 2018 · 58a4aef · 58a4aef
1 parent 5accde7
commit 58a4aef
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/test/site/content-org/all-posts.org b/test/site/content-org/all-posts.org
@@ -2004,6 +2004,53 @@ but not any simpler
 /italics/ \\
 +strikethrough+
 #+end_center
+** Wrapping Org headings in HTML tags   :wrapping:headings:section:tags:HTML:
+:PROPERTIES:
+:EXPORT_FILE_NAME: wrapping-org-headings-in-html-tags
+:END:
+#+begin_description
+Test the workaround for wrapping Org headings in HTML tags like
+~section~ and ~div~.
+#+end_description
+{{{oxhugoissue(160)}}}
+*** Org Source
+#+begin_src org
+,#+html: <style>.left { float: left; width: 45%;} .right { float: right; width: 45%;}</style>
+
+,#+html: <section class="left">
+# Hack to get around Blackfriday limitation: https://github.com/kaushalmodi/ox-hugo/issues/93
+,#+html: <section></section>
+,**** This section will show up on the left side
+Content in the left side section
+,#+html: </section>
+
+,#+html: <section class="right">
+,#+html: <section></section>
+,**** This section will show up on the right side
+Content in the right side section
+,#+html: </section>
+
+# Clear the floats
+,#+html: <div style="clear: both;"></div>
+#+end_src
+*** Output
+#+html: <style>.left { float: left; width: 45%;} .right { float: right; width: 45%;}</style>
+
+#+html: <section class="left">
+# Hack to get around Blackfriday limitation: https://github.com/kaushalmodi/ox-hugo/issues/93
+#+html: <section></section>
+**** This section will show up on the left side
+Content in the left side section
+#+html: </section>
+
+#+html: <section class="right">
+#+html: <section></section>
+**** This section will show up on the right side
+Content in the right side section
+#+html: </section>
+
+# Clear the floats
+#+html: <div style="clear: both;"></div>
 * Page Bundles                                                 :page_bundles:
 :PROPERTIES:
 :EXPORT_HUGO_SECTION: bundles

diff --git a/test/site/content/posts/wrapping-org-headings-in-html-tags.md b/test/site/content/posts/wrapping-org-headings-in-html-tags.md
@@ -0,0 +1,63 @@
++++
+title = "Wrapping Org headings in HTML tags"
+description = """
+  Test the workaround for wrapping Org headings in HTML tags like
+  `section` and `div`.
+  """
+tags = ["body", "wrapping", "headings", "section", "tags", "HTML"]
+draft = false
++++
+
+`ox-hugo` Issue #[160](https://github.com/kaushalmodi/ox-hugo/issues/160)
+
+
+## Org Source {#org-source}
+
+```org
+#+html: <style>.left { float: left; width: 45%;} .right { float: right; width: 45%;}</style>
+
+#+html: <section class="left">
+# Hack to get around Blackfriday limitation: https://github.com/kaushalmodi/ox-hugo/issues/93
+#+html: <section></section>
+**** This section will show up on the left side
+Content in the left side section
+#+html: </section>
+
+#+html: <section class="right">
+#+html: <section></section>
+**** This section will show up on the right side
+Content in the right side section
+#+html: </section>
+
+# Clear the floats
+#+html: <div style="clear: both;"></div>
+```
+
+
+## Output {#output}
+
+<style>.left { float: left; width: 45%;} .right { float: right; width: 45%;}</style>
+
+<section class="left">
+
+<section></section>
+
+
+### This section will show up on the left side {#this-section-will-show-up-on-the-left-side}
+
+Content in the left side section
+
+</section>
+
+<section class="right">
+
+<section></section>
+
+
+### This section will show up on the right side {#this-section-will-show-up-on-the-right-side}
+
+Content in the right side section
+
+</section>
+
+<div style="clear: both;"></div>