diff --git a/app/assets/javascripts/pretty-text/pretty-text.js.es6 b/app/assets/javascripts/pretty-text/pretty-text.js.es6
index f341e7c4c7c..32064527aed 100644
--- a/app/assets/javascripts/pretty-text/pretty-text.js.es6
+++ b/app/assets/javascripts/pretty-text/pretty-text.js.es6
@@ -1,10 +1,9 @@
 import { cook as cookIt, setup as setupIt } from 'pretty-text/engines/discourse-markdown-it';
 
 export function registerOption() {
-  // TODO next major version deprecate this
-  // if (window.console) {
-  //   window.console.log("registerOption is deprecated");
-  // }
+  if (window.console) {
+    window.console.log("registerOption is deprecated");
+  }
 }
 
 export function buildOptions(state) {
diff --git a/plugins/discourse-details/assets/javascripts/lib/discourse-markdown/details.js.es6 b/plugins/discourse-details/assets/javascripts/lib/discourse-markdown/details.js.es6
index 602846062e2..4fb9b3d0f3b 100644
--- a/plugins/discourse-details/assets/javascripts/lib/discourse-markdown/details.js.es6
+++ b/plugins/discourse-details/assets/javascripts/lib/discourse-markdown/details.js.es6
@@ -1,3 +1,25 @@
+import { registerOption } from 'pretty-text/pretty-text';
+
+function insertDetails(_, summary, details) {
+  return `<details><summary>${summary}</summary>${details}</details>`;
+}
+
+// replace all [details] BBCode with HTML 5.1 equivalent
+function replaceDetails(text) {
+  text = text || "";
+
+  while (text !== (text = text.replace(/\[details=([^\]]+)\]((?:(?!\[details=[^\]]+\]|\[\/details\])[\S\s])*)\[\/details\]/ig, insertDetails)));
+
+  // add new lines to make sure we *always* have a <p> element after </summary> and around </details>
+  // otherwise we can't hide the content since we can't target text nodes via CSS
+  return text.replace(/<\/summary>/ig, "</summary>\n\n")
+             .replace(/<\/details>/ig, "\n\n</details>\n\n");
+}
+
+registerOption((siteSettings, opts) => {
+  opts.features.details = true;
+});
+
 const rule = {
   tag: 'details',
   before: function(state, attrs) {
@@ -24,7 +46,11 @@ export function setup(helper) {
     'details.elided'
   ]);
 
-  helper.registerPlugin(md => {
-    md.block.bbcode_ruler.push('details', rule);
-  });
+  if (helper.markdownIt) {
+    helper.registerPlugin(md => {
+      md.block.bbcode_ruler.push('details', rule);
+    });
+  } else {
+    helper.addPreProcessor(text => replaceDetails(text));
+  }
 }
diff --git a/plugins/discourse-details/test/javascripts/lib/details-cooked-test.js.es6 b/plugins/discourse-details/test/javascripts/lib/details-cooked-test.js.es6
index 4087ea22b21..a1bd26c43d6 100644
--- a/plugins/discourse-details/test/javascripts/lib/details-cooked-test.js.es6
+++ b/plugins/discourse-details/test/javascripts/lib/details-cooked-test.js.es6
@@ -8,7 +8,7 @@ const defaultOpts = buildOptions({
     emoji_set: 'emoji_one',
     highlighted_languages: 'json|ruby|javascript',
     default_code_lang: 'auto',
-    censored_words: ''
+    censored_words: 'shucks|whiz|whizzer'
   },
   getURL: url => url
 });
@@ -19,13 +19,17 @@ test("details", assert => {
     assert.equal(new PrettyText(defaultOpts).cook(input), expected.replace(/\/>/g, ">"), text);
   };
   cooked(`<details><summary>Info</summary>coucou</details>`,
-         `<details><summary>Info</summary>coucou</details>`,
+         `<details><summary>Info</summary>\n\n<p>coucou</p>\n\n</details>`,
          "manual HTML for details");
+  cooked(` <details><summary>Info</summary>coucou</details>`,
+         `<details><summary>Info</summary>\n\n<p>coucou</p>\n\n</details>`,
+         "manual HTML for details with a space");
 
-  cooked("[details=testing]\ntest\n[/details]",
-`<details>
-<summary>
-testing</summary>
-<p>test</p>
-</details>`);
+  cooked(`<details open="open"><summary>Info</summary>coucou</details>`,
+         `<details open="open"><summary>Info</summary>\n\n<p>coucou</p>\n\n</details>`,
+         "open attribute");
+
+  cooked(`<details open><summary>Info</summary>coucou</details>`,
+         `<details open><summary>Info</summary>\n\n<p>coucou</p>\n\n</details>`,
+         "open attribute");
 });