SQL Tagged Template Strings with JavaScript

[Karl Horky]

Since prism@1.24.0, there has been the possibility of highlighting the SQL within tagged template literals: PrismJS/prism#2945 (comment)

refractor updated to that version in e642cae

But it appears that this is not working, unless I have done something wrong here:

          "children": [
            {
              "type": "text",
              "value": "\n  SELECT * FROM users WHERE id = "
            }
          ]

https://replit.com/@karlhorky/refractor-demo

[Karl Horky]

Ah wait, it seems like I didn't load the js-templates language, that's necessary too:

1. SQL (refractor/lang/sql.js)
2. JS Templates (refractor/lang/js-templates.js)
3. JavaScript

Updated the demo above, now it's working!

          "children": [
            {
              "type": "text",
              "value": "\n  "
            },
            {
              "type": "element",
              "tagName": "span",
              "properties": {
                "className": [
                  "token",
                  "keyword"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "SELECT"
                }
              ]
            },
            {
              "type": "text",
              "value": " "
            },
            {
              "type": "element",
              "tagName": "span",
              "properties": {
                "className": [
                  "token",
                  "operator"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "*"
                }
              ]
            },
            {
              "type": "text",
              "value": " "
            },
            {
              "type": "element",
              "tagName": "span",
              "properties": {
                "className": [
                  "token",
                  "keyword"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "FROM"
                }
              ]
            },
            {
              "type": "text",
              "value": " users "
            },
            {
              "type": "element",
              "tagName": "span",
              "properties": {
                "className": [
                  "token",
                  "keyword"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "WHERE"
                }
              ]
            },
            {
              "type": "text",
              "value": " id "
            },
            {
              "type": "element",
              "tagName": "span",
              "properties": {
                "className": [
                  "token",
                  "operator"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "="
                }
              ]

Sorry for the noise!