feat: support highlighting code in CSS

Close #98

README.md

@@ -183,6 +183,8 @@ The `// begin-block` and `// end-block` comments are removed after post-processi
     add(other);
 ```
 
+For highlighting code in CSS, use `/*// begin-block filenameAndId */`
+
 <!-- FROM https://github.com/FlowingCode/CommonsDemo/pull/62 -->
 ![image](https://github.com/FlowingCode/CommonsDemo/assets/11554739/02063272-029f-4b4b-bd6f-821f2f8a0158)
 

src/main/resources/META-INF/resources/frontend/code-viewer.ts

@@ -416,7 +416,11 @@ pre[class*="language-"] {
         //process instructions in element nodes
         if (nodes[i].nodeType!=1) continue;
 
-        const text = nodes[i].textContent!;
+        var text = nodes[i].textContent!;
+
+        var blockComment = text.match("^/\\*(?<content>(\\*(?!\/)|[^\\*])*)\\*\/");
+        if (blockComment) text = blockComment.groups!.content;
+
         var m = text.match("^//\\s*begin-block\\s+(\\S+)\\s*");
 
         if (m) {

src/test/java/com/flowingcode/vaadin/addons/demo/MultiSourceDemo.java

@@ -41,11 +41,15 @@ public MultiSourceDemo() {
     div.addClassName("custom-style");
     SourceCodeViewer.highlightOnHover(div, "main");
     add(div);
-    // end-block
 
     Button button1 = new Button("Highlight code in AdditionalSources");
     SourceCodeViewer.highlightOnClick(button1, "AdditionalSources.java#fragment");
-    add(button1);
+    add(new Div(button1));
+
+    Button button2 = new Button("Highlight code in CSS");
+    SourceCodeViewer.highlightOnClick(button2, "multi-source-demo.css#css-fragment");
+    add(new Div(button2));
+    // end-block
   }
 
 }

src/test/resources/META-INF/resources/frontend/multi-source-demo.css

@@ -1,3 +1,5 @@
+/*// begin-block css */
 .custom-style {
-  color: red;		
-}
+  color: red;
+}
+/*// end-block */