I have a combination of Google Apps Script logic and JavaScript that I am using within my Nunjucks environment. The logic looks like this within one of my views

//...Nunjucks logic above

<script>
   //debug | see parameter data in terminal and on page
    function displayParameterData() {
      const datags = <?!= JSON.stringify(data) ?>;
      console.log(datags);
      document.write(JSON.stringify(datags));
   }
   displayParameterData();
</script>

//...Nunjucks logic below

When I build my npm project, Nunjucks makes the following adjustment to my datags value above... < ? ! = JSON.stringify(data) ? > ;

Is there anyway I can tell Nunjucks to not make that adjustment and leave the markup exactly how it is in this specific area?

I found other resources on stack in regards to Nunjucks espcaping, but nothing close enough to the code setup of my situation..

Thanks for any advice

I have a combination of Google Apps Script logic and JavaScript that I am using within my Nunjucks environment. The logic looks like this within one of my views

//...Nunjucks logic above

<script>
   //debug | see parameter data in terminal and on page
    function displayParameterData() {
      const datags = <?!= JSON.stringify(data) ?>;
      console.log(datags);
      document.write(JSON.stringify(datags));
   }
   displayParameterData();
</script>

//...Nunjucks logic below

When I build my npm project, Nunjucks makes the following adjustment to my datags value above... < ? ! = JSON.stringify(data) ? > ;

Is there anyway I can tell Nunjucks to not make that adjustment and leave the markup exactly how it is in this specific area?

I found other resources on stack in regards to Nunjucks espcaping, but nothing close enough to the code setup of my situation..

Thanks for any advice

• javascript
• gulp-nunjucks-render

Share Improve this question Follow edited Mar 25 at 21:59 Progman 19.7k77 gold badges5555 silver badges8282 bronze badges asked Mar 25 at 4:37 klewisklewis 8,4181616 gold badges6969 silver badges112112 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

The issue you’re running into is that Nunjucks is escaping the < ? ! = ... ? > syntax because it doesn’t recognize it as part of its templating system. Nunjucks provides a {% raw %} block that prevents the templating engine from processing specific parts of your code

Try this out,

{% raw %}
<script>
   //debug | see parameter data in terminal and on page
    function displayParameterData() {
      const datags = <?!= JSON.stringify(data) ?>;
      console.log(datags);
      document.write(JSON.stringify(datags));
   }
   displayParameterData();
</script>
{% endraw %}

After much testing, what worked for me was actually modifying my .pipe() process within my gulp-nunjucks-render settings, which is an npm package within my gulpfile.js file.

In detail, right before my Nunjucks .html files are sent to the /appsscript folder...

//DETERMINES IF WE ARE READY TO PREP AND PUSH TO GOOGLE
  const GPREP = yargs.argv.gprep;

  //...more code...

  .pipe(gulpif(GPREP, dest(mApps)))

...I am now using two additional pipe processes to find and replace ("correct"), the Google Apps Script tags, using the npm packages gulp-replace...

.pipe(gulpif(GPREP, replace('< ? !','<?!')))
.pipe(gulpif(GPREP, replace('? > ;','?>;')))
.pipe(gulpif(GPREP, dest(mApps)))

As a result, when I look at my .html file in my /appsscript folder, the script is now corrected...

<script>
      //debug | see parameter data in terminal and on page
      function displayParameterData() {
          const datags = <?!= JSON.stringify(data) ?>;
          console.log(datags);
          document.write(JSON.stringify(datags));
      }
      displayParameterData();
  </script>