add default settings to be configurable and enable the declarative me…

…thod for new options

README.md

@@ -91,7 +91,13 @@ hidePlugin: true,
 // The attributes to be removed from the element
 removeAttributes: null,
 // The class attribute to add to the main container div
-class: "showsource"
+class: "showsource",
+// Number of characters to break the line of the tag (inheritable)
+tagLineBreak: null,
+// Max attributes number of consecutive attributes that may appear in a line (inheritable)
+maxAttributesPerLine: null,
+// Space separated regular expressions that make that one attribute whose start matches any of them is rendered in a single line (i.e. no other attribute is rendered in the same line); e.g. if the value is data-* then all the attributes starting with data- will be rendered in a single line (inheritable)
+separateElements: null,
 }
 ```
 
@@ -106,3 +112,14 @@ The possible options are:
 - `data-showsource-hide-plugin` instructs the library to hide the attributes related to this plugin (i.e. the `data-showsource-*` attributes). The default value is `true`. This attribute is inheritable to the children.
 - `data-showsource-remove-attributes` is a space separated list of the attributes to be hidden from the element. The default value is `null`.
 - `data-showsource-class` is a space separated list of classes to add to the main container div. The default value is `showsource`.
+- `data-showsource-tag-line-break` is the number of characters to break the line of the tag. The default value is `null` (i.e. deactivated). This attribute is inheritable to the children.
+- `data-showsource-max-attributes-per-line` is the max number of consecutive attributes that may appear in a line. The default value is `null` (i.e. deactivated). This attribute is inheritable to the children.
+- `data-showsource-separate-elements` is a space separated list of regular expressions that makes that one attribute that starts matching any of them is rendered in a single line with no other attribute in the same line; e.g. if the value is `data-*` then all the attributes starting with `data-` will be rendered in a single line. The default value is `null` (i.e. deactivated). This attribute is inheritable to the children.
+
+### Default options
+
+The default options can be changed by modifying the `showsource.defaults` object. For example, to change the default indentation to four spaces, we can do the following after including the library:
+
+```javascript
+showsource.defaults.indentation = "    ";
+```

example.html

@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">   
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
-    <link href="css/showsource.css" rel="stylesheet">
     <style>
       html, body {
         padding: 20px;
@@ -32,7 +31,7 @@ <h2>Simple example</h2>
             <img src="https://picsum.photos/400/200" class="mx-auto">
         </div>
     </div>
-    <div class="example" data-showsource data-showsource-hide-plugin="false" data-showsource-remove="">
+    <div class="example" data-showsource data-showsource-hide-plugin="false" data-showsource-remove="" data-showsource-max-attributes-per-line="2">
         <h2>Extended simple example</h2>
         <p>This is almost the same example than before, but we are overridding some default options.
             <ul>
@@ -47,6 +46,8 @@ <h2>Extended simple example</h2>
 </body>
   <script src="js/showsource.js"></script>
   <script>
+    showsource.defaults.maxAttributesPerLine = 1;
+    console.log(showsource.defaults);
     if (document.addEventListener) {
       document.addEventListener("DOMContentLoaded", function() {
         hljs.highlightAll();

js/showsource.js

@@ -42,11 +42,11 @@ let defaultOptions = {
     // The class attribute to add to the main container div
     class: "showsource",
     // Tag length limit
-    tagLengthLimit: 100,
+    tagLineBreak: null,
     // Max attributes in a row
-    maxAttributesInRow: 3,
+    maxAttributesPerLine: null,
     // Separate these elements in a new line
-    separateElements: "data-*",
+    separateElements: null,
 };
 
 /**
@@ -82,7 +82,19 @@ function beautify(el, userOptions = {}, indent = "") {
         elOptions.hidePlugin = el.dataset.showsourceHidePlugin.toLowerCase() != "false";
     }
 
-    let options = Object.assign({}, defaultOptions, elOptions, userOptions);
+    if (el.dataset.showsourceTagLineBreak != undefined) {
+        elOptions.tagLineBreak = parseInt(el.dataset.showsourceTagLineBreak);
+    }
+
+    if (el.dataset.showsourceMaxAttributesPerLine != undefined) {
+        elOptions.maxAttributesPerLine = parseInt(el.dataset.showsourceMaxAttributesPerLine);
+    }
+
+    if (el.dataset.showsourceSeparateElements != undefined) {
+        elOptions.separateElements = el.dataset.showsourceSeparateElements;
+    }
+
+    let options = Object.assign({}, defaultOptions, window.showsource.defaults, elOptions, userOptions);
 
     if (options.skip) {
         return [];
@@ -94,7 +106,10 @@ function beautify(el, userOptions = {}, indent = "") {
     // The inherited options will be passed to the children
     let childOptions = Object.assign({}, userOptions, {
         indentation: options.indentation,
-        hidePlugin: options.hidePlugin
+        hidePlugin: options.hidePlugin,
+        tagLineBreak: options.tagLineBreak,
+        maxAttributesPerLine: options.maxAttributesPerLine,
+        separateElements: options.separateElements
     });
 
     if (typeof options.remove === "string") {
@@ -166,20 +181,19 @@ function beautify(el, userOptions = {}, indent = "") {
                 continue;
             }
 
-            if (attributesInRow >= options.maxAttributesInRow) {
+            if ((options.maxAttributesPerLine !== null) && (attributesInRow >= options.maxAttributesPerLine)) {
                 beautifulElement.push(" " + indent + attributeString);
                 attributesInRow = 1;
                 continue;
             } 
 
-            if ((attributeString.length + beautifulElement[beautifulElement.length - 1].length)> options.tagLengthLimit) {
+            if ((options.tagLineBreak !== null) && ((attributeString.length + beautifulElement[beautifulElement.length - 1].length)> options.tagLineBreak)) {
                 beautifulElement.push(" " + indent + attributeString);
                 attributesInRow = 1;
                 continue;
             } 
             beautifulElement[beautifulElement.length - 1] += " " + attributeString;
             attributesInRow++;
-            // isData = attribute.name.startsWith("data-");
         }
     }
 
@@ -276,7 +290,8 @@ if (document.addEventListener) {
 }
 
 window.showsource = {
+    defaults: Object.assign({}, defaultOptions),
     beautify: beautify,
     init: init,
-    version: "1.1.0"
+    version: "1.1.1"
 }