script.{{backendConfig.extension}} error

When I create a code section that contains any Arabic text, the knitted page will not display the code in the script window, but it will display a message "script.{{backendConfig.extension}}" instead. The console will also not display as normal.

RStudio Session info:

> sessionInfo()
R version 4.0.2 (2020-06-22)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19041)

Screenshot:

html code of the exercise that fails to display correctly:

<div data-height="300" data-encoded="true" class="datacamp-exercise ng-scope" style="height:300px;">
   <!--[if lt IE 10]>
   <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
   <div ng-controller="NormalExerciseController" class="ng-scope">
      <div class="dcl-exercise-area" resize-layout="">
         <div class="dcl-left-pane" ng-class="{'dcl-mini': useMiniLayout}">
            <ul class="dcl-content--tab">
               <li><a href="" ng-click="activateLeftTab('usercode')" ng-class="{'dcl-active': isActiveLeftTab('usercode')}" class="ng-binding">script.{{backendConfig.extension}}</a></li>
               <li ng-show="solutionTabShown"><a class="dcl-animation--flash ng-binding" href="" ng-click="activateLeftTab('solution')" ng-class="{'dcl-active': isActiveLeftTab('solution')}">solution.{{backendConfig.extension}}</a></li>
               <li><a href="" ng-show="useMiniLayout" ng-click="activateLeftTab('console')" ng-class="{'dcl-active': isActiveLeftTab('console')}" class="ng-binding">{{backendConfig.console}}</a></li>
               <li><a href="" ng-show="useMiniLayout &amp;&amp; plotTabShown" ng-click="activateLeftTab('plots')" ng-class="{'dcl-active': isActiveLeftTab('plots')}">Plots</a></li>
            </ul>
            <div class="dcl-content--tab-body">
               <div code-editor="" control="editor" ng-show="isActiveLeftTab('usercode') || isActiveLeftTab('solution')" ng-model="userCode" class="ng-pristine ng-untouched ng-valid"></div>
               <div ng-show="isActiveLeftTab('console')" class="dcl-console-target dcl-console-mini-target"></div>
               <div ng-show="isActiveLeftTab('plots')" class="dcl-plots-mini-target"></div>
               <div growl="" ng-show="!isActiveLeftTab('plots')" inline="true" limit-messages="1" sct-feedback="" class="sct-feedback-container">
                  <div class="growl-container" ng-class="wrapperClasses()">
                     <!-- ngRepeat: message in growlMessages.directives[referenceId].messages -->
                  </div>
               </div>
            </div>
         </div>
         <div ng-show="!useMiniLayout" class="dcl-right-pane clearfix">
            <a class="dcl-github-link dcl-no-link-style" href="https://github.com/datacamp/datacamp-light" uib-tooltip="View DataCamp Light on Github" tooltip-placement="left" target="_blank">
               <div class="dcl-github-logo"></div>
            </a>
            <ul class="dcl-content--tab">
               <li><a href="" ng-click="activateRightTab('console')" ng-class="{'dcl-active': isActiveRightTab('console')}" class="ng-binding">{{backendConfig.console}}</a></li>
               <li><a ng-show="plotTabShown" href="" ng-click="activateRightTab('plots')" ng-class="{'dcl-active': isActiveRightTab('plots')}">Plots</a></li>
            </ul>
            <div class="dcl-content--tab-body">
               <div ng-show="isActiveRightTab('console')" control="console" class="dcl-console-target dcl-console-full-target">
                  <console class="dcl-console"></console>
               </div>
               <div ng-show="isActiveRightTab('plots')" class="dcl-plots-full-target">
                  <plots-container class="dcl-plots-container">
                     <div class="dcl-plot"><img ng-show="plots.length > 0" ng-src="{{currentImage.src}}"></div>
                     <div class="dcl-plot-actions"><button class="dcl-btn dcl-btn-small dcl-plot-btn" ng-click="removePlot()" ng-disabled="plots.length === 0"><i class="fa fa-trash"></i></button> <button class="dcl-btn dcl-btn-small dcl-plot-btn" ng-click="previousPlot()" ng-disabled="plotIndex <= 0"><i class="fa fa-chevron-left"></i></button> <span ng-show="plots.length > 0" class="ng-binding">{{plotIndex + 1}}/{{plots.length}}</span> <span ng-hide="plots.length > 0">0/0</span> <button class="dcl-btn dcl-btn-small dcl-plot-btn" ng-click="nextPlot()" ng-disabled="plotIndex >= (plots.length - 1)"><i class="fa fa-chevron-right"></i></button> <button class="dcl-btn dcl-btn-small dcl-plot-btn" ng-click="expand('plot')" ng-disabled="plots.length === 0"><i class="fa fa-expand"></i></button></div>
                  </plots-container>
               </div>
            </div>
         </div>
      </div>
      <div class="dcl-action-panel clearfix" exercise="exercise"><button ng-show="hasHint()" class="dcl-btn dcl-btn-secondary dcl-btn-small" href="" ng-click="showHint()" tooltip-placement="top" uib-tooltip="Get Hint">Hint</button> <button ng-show="solutionButtonShown" class="dcl-btn dcl-btn-secondary dcl-btn-small" href="" ng-click="showSolutionTab()" tooltip-placement="top" uib-tooltip="Show Solution">Solution</button> <button class="dcl-btn dcl-btn-primary dcl-btn-small" href="" ng-click="execute()" submit-disable="" tooltip-placement="top" uib-tooltip="Execute Code">Run</button><span class="dcl-app-status"><i class="fa fa-circle" ng-hide="isLoading" ng-class="{'dcl-busy': isBusy, 'dcl-broken': isBroken}"></i> <i class="dcl-app-status-spinner fa fa-circle-o-notch fa-spin" ng-show="isLoading"></i> <span class="dcl-app-status-text dcl-hide-xxs ng-binding">{{appStatusText}}</span></span></div>
   </div>
</div>

Knitting output:

processing file: problem_with_Arabic.Rmd
  |..........................                                            |  38%
  ordinary text without R code

  |...................................                                   |  50%
label: unnamed-chunk-1
  |............................................                          |  62%
  ordinary text without R code

  |....................................................                  |  75%
label: unnamed-chunk-2
  |.............................................................         |  88%
  ordinary text without R code

  |......................................................................| 100%
label: unnamed-chunk-3

output file: problem_with_Arabic.knit.md

"C:/Program Files/RStudio/bin/pandoc/pandoc" +RTS -K512m -RTS problem_with_Arabic.utf8.md --to html4 --from markdown+autolink_bare_uris+tex_math_single_backslash --output problem_with_Arabic.html --lua-filter "C:\Users\peter\Documents\R\win-library\4.0\rmarkdown\rmarkdown\lua\pagebreak.lua" --lua-filter "C:\Users\peter\Documents\R\win-library\4.0\rmarkdown\rmarkdown\lua\latex-div.lua" --variable bs3=TRUE --standalone --section-divs --template "C:\Users\peter\Documents\R\win-library\4.0\rmarkdown\rmd\h\default.html" --no-highlight --variable highlightjs=1 --variable theme=bootstrap --include-in-header "C:\Users\peter\AppData\Local\Temp\RtmpqaFRJV\rmarkdown-strd84244b5cf3.html" --mathjax --variable "mathjax-url:https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 

Output created: problem_with_Arabic.html

Rmd document I used to create this example:

--- title: "Arabic characters problem" output: html_document: self_contained: false ---

```{r setup, include=FALSE} tutorial::go_interactive() ```

If a code section contains any Arabic letter, the creation of the code editor will fail:

```{r} a <- "ألف" ```

Same example, without the Arabic letters, works:

```{r} a <- "alif" Encoding(a) ```

No problem with other non-ASCII characters:

```{r} a <- "àlíf~" Encoding(a) ```

datacamp / tutorial