Merge pull request #58 from peopledoc/feat/beautify-html-examples-with-prettier

Feat/beautify html examples with prettier

Author: KamiKillertO

assets/styledown.css

@@ -136,6 +136,8 @@ code.sg {
  */
 
 .sg-code {
+  max-height: 20vw;
+
   border: solid 1px transparent;
   overflow-x: auto;
   border-bottom-left-radius: 3px;

index.js

@@ -9,10 +9,10 @@ const Cheerio = require('cheerio')
 const extend = require('util')._extend
 const mdextract = require('mdextract')
 const hljs = require('highlight.js')
-const beautify = require('js-beautify').html_beautify
 const { version } = require('./package.json')
 const { readFileSync } = require('fs')
 const default_conf = require('./lib/default_conf.js')
+const { beautifyHTML } = require('./lib/utils')
 
 const {
   addClasses,
@@ -175,16 +175,9 @@ class Styledown {
 
   prettyprint(html, options) {
 
-    let opts = {
-      indent_size: this.options.indentSize,
-      wrap_line_length: 120,
-      unformatted: ['pre']
-    }
-    // js-beautify sometimes trips when the first character isn't a <. not
-    // sure... but might as well do this.
-    html = html.trim()
+    let output = html.trim()
 
-    let output = beautify(html, extend(opts, options))
+    output = beautifyHTML(html, options)
 
     // cheerio output tends to have a bunch of extra newlines. kill them.
     output = output.replace(/\n\n+/g, "\n\n")

lib/utils.js

@@ -1,4 +1,5 @@
 const Pug = require('pug')
+const prettier = require('prettier')
 
 /**
  * Get the tags and code out of the code text.
@@ -10,45 +11,53 @@ const Pug = require('pug')
  *     => { tag: null, code: 'hello' }
  */
 
-exports.parseCodeText = function (code) {
-  let m = code.trim().match(/^@([^\n]+)/)
+function parseCodeText(code) {
+  let matches = code.trim().match(/^@([^\n]+)/)
 
-  if (m) return { tag: m[1], code: code.substr(m[1].length+2) }
-  return { tag: null, code }
+  if (matches) {
+    return {
+      tag: matches[1],
+      code: code.substr(matches[1].length+2)
+    }
+  }
+  return {
+    tag: null,
+    code
+  }
 }
 
 /**
  * Parse tags
  */
 
-exports.parseTags = function (str) {
+function parseTags(str) {
   if (typeof str !== 'string') return {}
 
-  let m
+  let matches
   let obj = {}
   str = str.trim()
 
   /* eslint-disable */
   while (true) {
-    if (m = str.match(/^\.([a-z\-]+)\s*/)) {
-      if (!obj["class"]) obj["class"] = []
-      obj["class"].push(m[1])
-    } else if (m = str.match(/^([a-z\-]+)="([^"]+)"\s*/)) {
-      obj[m[1]] = m[2]
-    } else if (m = str.match(/^([a-z\-]+)='([^']+)'\s*/)) {
-      obj[m[1]] = m[2]
-    } else if (m = str.match(/^([a-z\-]+)=([^\s]+)\s*/)) {
-      obj[m[1]] = m[2]
-    } else if (m = str.match(/^([a-z\-]+)\s*/)) {
-      obj[m[1]] = true
+    if (matches = str.match(/^\.([a-z\-]+)\s*/)) {
+      if (!obj['class']) obj['class'] = []
+      obj['class'].push(matches[1])
+    } else if (matches = str.match(/^([a-z\-]+)="([^"]+)"\s*/)) {
+      obj[matches[1]] = matches[2]
+    } else if (matches = str.match(/^([a-z\-]+)='([^']+)'\s*/)) {
+      obj[matches[1]] = matches[2]
+    } else if (matches = str.match(/^([a-z\-]+)=([^\s]+)\s*/)) {
+      obj[matches[1]] = matches[2]
+    } else if (matches = str.match(/^([a-z\-]+)\s*/)) {
+      obj[matches[1]] = true
     } else {
-      if (obj["class"]) obj["class"] = obj["class"].join(' ')
+      if (obj['class']) obj['class'] = obj['class'].join(' ')
       return obj
     }
     /* eslint-enable */
 
     // Trim
-    str = str.substr(m[0].length)
+    str = str.substr(matches[0].length)
   }
 }
 
@@ -59,7 +68,7 @@ exports.parseTags = function (str) {
  *     prefixClass('pad dark', 'sg')  => 'sg-pad sg-dark'
  */
 
-exports.prefixClass = function (klass, prefix) {
+function prefixClass(klass, prefix) {
   return klass.split(' ').map(function (n) {
     return n.length > 0 ? (`${prefix  }-${  n}`) : n
   }).join(' ')
@@ -68,8 +77,7 @@ exports.prefixClass = function (klass, prefix) {
 /**
  * Processes a block of text as either HTML or Pug.
  */
-
-exports.htmlize = function (src, filePath = '.') {
+function htmlize(src, filePath = '.') {
   // Mdconf processes them as arrays
   if (src.constructor === Array) {
     /* eslint-disable-next-line prefer-destructuring */
@@ -79,9 +87,41 @@ exports.htmlize = function (src, filePath = '.') {
   if (src.substr(0, 1) === '<') {
     return src
   } else {
-    return Pug.render(src, {
+    let html = Pug.render(src, {
       filename: filePath,
       doctype: 'html'
     })
+    return beautifyHTML(html)
   }
 }
+
+/**
+ * Beautify HTML text with prettier
+ *
+ * @param {string} html
+ */
+function beautifyHTML(html, options) {
+  let output = prettier.format(html, {
+    parser: 'html',
+    htmlWhitespaceSensitivity: 'ignore',
+    insertPragma: false,
+    printWidth: 120,
+    proseWrap: 'preserve',
+    requirePragma: false,
+    singleQuote: false,
+    tabWidth: 2,
+    useTabs: false,
+    vueIndentScriptAndStyle: false,
+    ...options
+  })
+
+  return output.replace(/\/>/g, '>') // Prettier add trailling slash to self-closing elements but we don't want them
+}
+
+module.exports = {
+  parseCodeText,
+  parseTags,
+  prefixClass,
+  htmlize,
+  beautifyHTML
+}

package-lock.json

@@ -23,6 +23,7 @@
     "marked": "^0.3.0",
     "mdextract": "^1.0.0",
     "minimist": "^1.2.0",
+    "prettier": "^2.1.2",
     "pug": "^3.0.0",
     "read-input": "^0.3.0"
   },

package.json

@@ -23,7 +23,7 @@ describe('Markdown', function() {
       expect(this.$).have.selector('p.sg')
     })
     it('html template', function() {
-      expect(this.html).match(/doctype html/)
+      expect(this.html).match(/!DOCTYPE html/)
       expect(this.html).match(/body/)
       expect(this.html).match(/head/)
       expect(this.$).have.selector('meta[charset="utf-8"]')

test/markdown.js

@@ -84,7 +84,7 @@ describe('Pre tag', function() {
       expect(this.$).have.selector('pre')
     })
     it('makes a <pre> HTML code', function() {
-      expect(this.$("pre").text()).eql('<div class="button"></div>')
+      expect(this.$("pre").text()).eql('<div class="button"></div>\n')
     })
   })
 })

test/pre_tag.js

@@ -2,39 +2,37 @@ const setupTestEnv = require('./setup')
 
 describe('Pretty Print', function() {
   setupTestEnv(this)
-  
+
   describe('default', function() {
     beforeEach(function() {
       this.load("### Hello\n\n    @example\n    div", {
         head: ''
       })
     })
-    it('not indent <head>', function() {
-      expect(this.html).match(/\n<head/)
+    it('indent <head>', function() {
+      expect(this.html).match(/\n {2}<head/)
     })
-    it('not indent <body>', function() {
-      expect(this.html).match(/\n<body/)
+    it('indent <body>', function() {
+      expect(this.html).match(/\n {2}<body/)
     })
     it('indent .sg-section-hello', function() {
-      expect(this.html).match(/\n {4}<section class="sg-block sg-section-hello/)
+      expect(this.html).match(/\n {6}<section class="sg-block sg-section-hello/)
     })
     it('indent .sg-canvas', function() {
-      expect(this.html).match(/\n {8}<div class="sg-canvas/)
+      expect(this.html).match(/\n {10}<div class="sg-canvas/)
     })
   })
   describe('custom indentSize', function() {
     beforeEach(function() {
       this.load("### Hello\n\n    @example\n    div", {
-        indentSize: 4,
-        head: ''
+        tabWidth: 4
       })
     })
-    it('should work', function() {})
     it('indent .sg-section-hello', function() {
-      expect(this.html).match(/\n {8}<section class="sg-block sg-section-hello/)
+      expect(this.html).match(/<section class="sg-block sg-section-hello/)
     })
     it('indent .sg-canvas', function() {
-      expect(this.html).match(/\n {16}<div class="sg-canvas/)
+      expect(this.html).match(/\n {8}<div class="sg-canvas/)
     })
   })
 })