Add Syntax Highlighting Change

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "sigconverter.io"
-version = "0.1.0"
+version = "0.1.1"
 description = ""
 authors = ["magicsword <[email protected]>"]
 readme = "README.md"
@@ -11,7 +11,7 @@ pysigma-backend-azure = {git = "https://github.com/sifex/pySigma-backend-azure.g
 pysigma-backend-loki = {git = "https://github.com/grafana/pySigma-backend-loki.git", rev = "452aa0d8bb096bbabdca5a83a884c45662dec666"}
 pysigma-backend-microsoft365defender = {git = "https://github.com/AttackIQ/pySigma-backend-microsoft365defender.git", rev = "731db4b6c7cbab8898973b4350d93268e135c495"}
 pysigma-backend-stix = {git = "https://github.com/barvhaim/pySigma-backend-stix", rev = "0d7c05e187249c26f5abb99f63bf839c78705d1e"}
-flask = "3.0.0"
+flask = "^3.0.0"
 sigma-cli = "0.7.6"
 pysigma = "0.9.11"
 pysigma-backend-carbonblack = "0.1.4"

static/css/style.css

@@ -61,14 +61,27 @@ pre[class*="language-yaml"] {
   white-space: pre !important;
 }
 
-div[class*="language-splunk"],
+code[class*="language-kusto"],
+code[class*="language-kusto"] *,
+pre[class*="language-kusto"] {
+  word-break: break-word !important;
+  white-space: pre-line !important;
+}
+
 code[class*="language-splunk"],
 code[class*="language-splunk"] *,
 pre[class*="language-splunk"] {
   word-break: break-word !important;
   white-space: pre-line !important;
 }
 
+code[class*="language-sql"],
+code[class*="language-sql"] *,
+pre[class*="language-sql"] {
+  word-break: break-word !important;
+  white-space: pre-line !important;
+}
+
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
   background-color: var(--sigma-dark) !important;

static/js/index.js

@@ -101,6 +101,7 @@ window.onload = function () {
 
 // define onchange handler for select dropdowns
 document.getElementById("select-backend").onchange = function () {
+  updateBackendSyntax();
   filterFormatOptions();
   filterPipelineOptions();
   generateCli();
@@ -309,3 +310,32 @@ function filterPipelineOptions() {
     });
   });
 }
+
+// Updates the query-code code block with a prismjs class mapped to the language
+function updateBackendSyntax() {
+  let backend = getSelectValue("select-backend");
+  let language = "";
+  let prev_language = "";
+  let default_language = "language-sql";
+
+  // Determines what class was previously present upon a new backend selection
+  let prev_lang_class = document.getElementById("query-code").classList;
+  for (let prev of prev_lang_class) {
+    if (prev.match(/^language-\w+(-\w+)?/)) {
+      prev_language = prev
+    }
+  }
+
+  const languageMap = {
+    "azure" : "language-kusto",
+    "ibm-qradar-aql": "language-sql",
+    "microsoft365defender": "language-kusto",
+    "splunk": "language-splunk-spl",
+    "qradar": "language-sql"
+  };
+
+  language = languageMap[backend] ? languageMap[backend] : default_language;
+
+  document.getElementById("query-code").classList.remove(prev_language);
+  document.getElementById("query-code").classList.toggle(language);
+}

templates/index.html

@@ -175,7 +175,7 @@
               query
             </span>
           </p>
-          <pre class="border border-sigma-blue language-splunk-spl">
+          <pre class="border border-sigma-blue">
             <code id="query-code" class="language-splunk-spl text-sm">the generated query should be displayed here :)</code></pre>
         </div>
 
@@ -191,6 +191,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-yaml.min.js" integrity="sha512-6O/PZimM3TD1NN3yrazePA4AbZrPcwt1QCGJrVY7WoHDJROZFc9TlBvIKMe+QfqgcslW4lQeBzNJEJvIMC8WhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-splunk-spl.min.js" integrity="sha512-RLhcqVEXOdbZPCJ8YG5fZDRIK3nXiS6erMtnzLyaKzS17H7mRi/9a1o+s2TM2XlWk4Nk7E579LyL63R7nUlrgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-bash.min.js" integrity="sha512-ZqfG//sXQwAA7DOArFJyMmZQ3knKe+0ft3tPQZPvDPJR04IatmhVO5pTazVV+fLVDYSy28PhoBeUj5wxGRiGAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-kusto.min.js" integrity="sha512-94ETWqaOsWjGNfN6BExGdnyVP7ACudwU7iApdZJHm97/NY7jQ9mWcJRcQDmSgpVhV1kEJzJnlJA4/Qcjv/GGgA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js" integrity="sha512-sijCOJblSCXYYmXdwvqV0tak8QJW5iy2yLB1wAbbLc3OOIueqymizRFWUS/mwKctnzPKpNdPJV3aK1zlDMJmXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <!-- sigconverter.io custom js -->
   <script src="{{ url_for('static', filename='js/index.js') }}"></script>
   <!-- CodeJar init -->