Merge pull request #12 from bit-docs/sorry-cherif

Sorry cherif

Author: cherifGsoul

.npmrc

@@ -0,0 +1 @@
+package-lock=false

index.js

@@ -88,23 +88,32 @@ var getConfig = function(lineString, lineCount) {
 	};
 };
 
-function findPreviousSibling(el, tag) {
+function findPreviousSibling(start, tag) {
 	tag = tag.toUpperCase();
 
-	while (el = el.previousSibling) {
-		if (el.tagName && el.tagName.toUpperCase() === tag) {
-			return el;
-		}
-	}
+	while(start) {
+        if(start.nodeName === tag) {
+            return start;
+        }
+        if(start.querySelector) {
+            var pre = start.querySelector(tag);
+            if(pre) {
+                return pre;
+            }
+        }
+
+        // needs to be previousSibling for zombie
+        start = start.previousSibling;
+    }
 }
 
 module.exports = function() {
-	var highlights = document.querySelectorAll('span[line-highlight]')
+	var highlights = document.querySelectorAll('div[line-highlight]');
 
 	for (var i = 0; i < highlights.length; i++) {
 		var highlight = highlights[i];
 
-		var preBlock = findPreviousSibling(highlight.parentElement, 'pre');
+		var preBlock = findPreviousSibling(highlight, 'pre');
 		var codeBlock = preBlock.childNodes.item(0);
 
 		var total = codeBlock.innerHTML.split('\n').length - 1;

package.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/bit-docs/bit-docs-html-highlight-line#readme",
   "dependencies": {
-    "bit-docs-prettify": "^0.2.2-8",
+    "bit-docs-prettify": "<2.0.0",
     "prismjs": "^1.11.0"
   },
   "devDependencies": {

tags.js

@@ -1,16 +1,16 @@
 /**
  * @parent bit-docs-html-highlight-line/tags
  * @module {bit-docs-process-tags/types/tag} bit-docs-html-highlight-line/tags/highlight @highlight
- * 
+ *
  * Highlight the specified code lines.
- * 
+ *
  * @signature `@highlight LINES[,ONLY]`
- * 
+ *
  * @param {String} LINES The lines to highlight like `2-4`.
- * 
+ *
  * @param {String} [,ONLY] Collapse non-highlighted lines greater than three
  * lines away (useful for long code snippets).
- * 
+ *
  * @codestart javascript
  * /**
  *  * ```js
@@ -24,27 +24,28 @@
  *  *   "season": "Summer",
  *  *   "awesome": "yes"
  *  * }
- *  * ``` 
+ *  * ```
  *  *
  *  * @highlight 2-4,only
  *  *|
  * @codeend
- * 
+ *
  * Injects a `<span line-highlight="2-4,only"></span>` element to the page that
  * will be picked up and used by the static front-end script
  * [bit-docs-html-highlight-line/highlight-line.js].
  */
 exports.highlight = {
     add: function(line, curData) {
+        var space = line.substr(0, line.indexOf("@highlight"));
         var lines = line.replace("@highlight","").trim();
-        var html = "<span line-highlight='"+lines+"'></span>";
+        var html = space+"<div line-highlight='"+lines+"'></div>";
         var validCurData =  (curData && curData.length !== 2);
         var useCurData = validCurData && (typeof curData.description === "string") && !curData.body;
 
         if(useCurData) {
-            curData.description += html;
+            curData.description += "\n"+html+"\n";
         } else {
-            this.body += html;
+            this.body += html+"\n";
         }
     }
 };

test-demo.md

@@ -101,7 +101,7 @@ Put the markup in a template.  Change the `HTML` tab to the following:
 
 </html>
 ```
-<span line-highlight='11,68,only'/>
+<div line-highlight='11,68,only'/>
 
 > NOTE: autofocus
 
@@ -112,7 +112,7 @@ var template = can.stache.from("todomvc-template");
 var frag = template({});
 document.body.appendChild(frag);
 ```
-<span line-highlight='1-3,only'/>
+<div line-highlight='1-3,only'/>
 
 ## Create the todos type and get items left working
 
@@ -149,7 +149,7 @@ var template = can.stache.from("todomvc-template");
 var frag = template({todos: todos});
 document.body.appendChild(frag);
 ```
-<span line-highlight='1-25,28,only'/>
+<div line-highlight='1-25,28,only'/>
 
 Update `HTML` to:
 
@@ -215,7 +215,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='22-31,36,50,only'/>
+<div line-highlight='22-31,36,50,only'/>
 
 Note:
 
@@ -276,7 +276,7 @@ var template = can.stache.from("todomvc-template");
 var frag = template({todosPromise: Todo.getList({})});
 document.body.appendChild(frag);
 ```
-<span line-highlight='1-15,37-43,46,only'/>
+<div line-highlight='1-15,37-43,46,only'/>
 
 Update `HTML` to:
 
@@ -342,7 +342,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='22,36,50,only'/>
+<div line-highlight='22,36,50,only'/>
 
 Note:
 
@@ -415,7 +415,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='23-24,28,only'/>
+<div line-highlight='23-24,28,only'/>
 
 TODO:
 
@@ -490,7 +490,7 @@ var template = can.stache.from("todomvc-template");
 var frag = template({todosPromise: Todo.getList({})});
 document.body.appendChild(frag);
 ```
-<span line-highlight='46-59,only'/>
+<div line-highlight='46-59,only'/>
 
 Update `HTML` to:
 
@@ -563,7 +563,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='11-16,18,22,only'/>
+<div line-highlight='11-16,18,22,only'/>
 
 ## List todos
 
@@ -643,7 +643,7 @@ var template = can.stache.from("todomvc-template");
 var frag = template({todosPromise: Todo.getList({})});
 document.body.appendChild(frag);
 ```
-<span line-highlight='60-68,only'/>
+<div line-highlight='60-68,only'/>
 
 Update `HTML` to:
 
@@ -720,7 +720,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='18-32,43,only'/>
+<div line-highlight='18-32,43,only'/>
 
 
 ## Edit todos
@@ -818,7 +818,7 @@ var template = can.stache.from("todomvc-template");
 var frag = template({todosPromise: Todo.getList({})});
 document.body.appendChild(frag);
 ```
-<span line-highlight='62-78,only'/>
+<div line-highlight='62-78,only'/>
 
 
 
@@ -902,7 +902,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='23,26,29-32,only'/>
+<div line-highlight='23,26,29-32,only'/>
 
 ## Routing
 
@@ -1020,7 +1020,7 @@ can.route.ready();
 var frag = template(vm);
 document.body.appendChild(frag);
 ```
-<span line-highlight='87-109,only'/>
+<div line-highlight='87-109,only'/>
 
 Update `HTML` to:
 
@@ -1104,7 +1104,7 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='55-56,59-60,63-64,only'/>
+<div line-highlight='55-56,59-60,63-64,only'/>
 
 
 ## Check all and clear completed
@@ -1259,7 +1259,7 @@ can.route.ready();
 var frag = template(vm);
 document.body.appendChild(frag);
 ```
-<span line-highlight='40-57,128-135,only'/>
+<div line-highlight='40-57,128-135,only'/>
 
 Update `HTML` to:
 
@@ -1346,4 +1346,4 @@ Update `HTML` to:
 
 </html>
 ```
-<span line-highlight='45-47,69-70,only'/>
+<div line-highlight='45-47,69-70,only'/>