SQL Tagged Template Strings with JavaScript

[karlhorky]

Since prism@1.24.0, there has been the possibility of highlighting the SQL within tagged template literals: https://github.com/PrismJS/prism/pull/2945#issuecomment-873616841

refractor updated to that version in e642cae669cd430d59452ddd44c8bbdc21482704

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

[karlhorky]

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!