在嵌入在 R Shiny 中的 ACE 編輯器中突出顯示

Question

我嘗試在 R Shiny 應用程序中嵌入的 ace 編輯器中突出顯示一組單詞。 我遵循了想要在 Ace 編輯器中突出顯示/更改某些單詞的顏色的建議？ ，但在使用aceEditor() function 時突出顯示不起作用，這是我的應用程序所需要的。 但是，如果我將aceEditor() function 替換為 tags$body 命令（見下文），則突出顯示有效。 請在下面查看我的代碼。 我的問題：有沒有辦法通過aceEditor() function 使用突出顯示？

這是一個示例，其中單詞 Mark 應顯示為藍色。

使用aceEditor()失敗：

library(shiny)
library(shinyAce)

htmlScript = "<script>\n define('ace/mode/custom', [], function(require, exports, module) {\n var oop = require(\"ace/lib/oop\");\n var TextMode = require(\"ace/mode/text\").Mode;"
htmlScript = paste0(htmlScript,"\n var Tokenizer = require(\"ace/tokenizer\").Tokenizer;\n var CustomHighlightRules = require(\"ace/mode/custom_highlight_rules\").CustomHighlightRules;")
htmlScript = paste0(htmlScript,"\n\n var Mode = function() {\n this.HighlightRules = CustomHighlightRules;\n};\n oop.inherits(Mode, TextMode);\n\n (function() {\n\n}).call(Mode.prototype);\n\n exports.Mode = Mode;\n});")
htmlScript = paste0(htmlScript,"\n define('ace/mode/custom_highlight_rules', [], function(require, exports, module) {\n var oop = require(\"ace/lib/oop\");\n var TextHighlightRules = require(\"ace/mode/text_highlight_rules\").TextHighlightRules;\n")
htmlScript = paste0(htmlScript,"\n var CustomHighlightRules = function() {\n\n var keywordMapper = this.createKeywordMapper({\n \"variable.language\": \"this\",\n \"keyword\": \"Mark|Ben|Bill\",\n \"constant.language\": \"true|false|null\",\n \"customTokenName\": \"problem\"\n}, \"text\", true);\n")
htmlScript = paste0(htmlScript,"\n this.$rules = {\n\"start\": [\n{\nregex: \"\\\\w+\\\\b\",\n token: keywordMapper\n},\n]\n};\n this.normalizeRules()\n};\n\n oop.inherits(CustomHighlightRules, TextHighlightRules);\n\n")
htmlScript = paste0(htmlScript,"\nexports.CustomHighlightRules = CustomHighlightRules;\n});\n\nvar editor = ace.edit(\"editor\");\n\n editor.session.setMode(\"ace/mode/custom\");\n</script>")
  
ui <- fluidPage(
  tags$head(HTML("<script src=\"https://ajaxorg.github.io/ace-builds/src/ace.js\"></script>")),

  aceEditor("editor", value="Mark", mode = "text"), #Mark should be highlighted with blue color

  tags$body(HTML(htmlScript))
)

server <- function(input, output, session){}

shinyApp(ui, server)

使用tags$body命令，有效：

ui <- fluidPage(
  tags$head(HTML("<script src=\"https://ajaxorg.github.io/ace-builds/src/ace.js\"></script>")),

  tags$body(HTML("<div id=\"editor\" style=\"height: 500px; width: 800px\"></div>")),

  tags$body(HTML(htmlScript))
)

server <- function(input, output, session){}

shinyApp(ui, server)

請在編輯器中輸入 Mark 一詞，它將以藍色顯示。

Answer 1

shinyAce包裝對ace庫的調用。 特別是定義語法突出顯示的mode 。 我不是JavaScript方面的專家，因此，我不知道aceEditor在哪里以及如何否決您的手動設置，但我知道如何讓您的自定義樣式起作用。

1. 創建一個包含以下內容的.js文件：

    ace.define('ace/mode/custom', [], function(require, exports, module) { var oop = require("ace/lib/oop"); var TextMode = require("ace/mode/text").Mode; var Tokenizer = require("ace/tokenizer").Tokenizer; var CustomHighlightRules = require("ace/mode/custom_highlight_rules").CustomHighlightRules; var Mode = function() { this.HighlightRules = CustomHighlightRules; }; oop.inherits(Mode, TextMode); (function() { }).call(Mode.prototype); exports.Mode = Mode; }); ace.define('ace/mode/custom_highlight_rules', [], function(require, exports, module) { var oop = require("ace/lib/oop"); var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules; var CustomHighlightRules = function() { var keywordMapper = this.createKeywordMapper({ "variable.language": "this", "keyword": "Mark|Ben|Bill", "constant.language": "true|false|null", "customTokenName": "problem" }, "text", true); this.$rules = { "start": [{ regex: "\\w+\\b", token: keywordMapper }, ] }; this.normalizeRules() }; oop.inherits(CustomHighlightRules, TextHighlightRules); exports.CustomHighlightRules = CustomHighlightRules; });

   請特別注意使用ace.define而不是define 。

2. 將文件放在如圖所示的文件夾中

   system.file("www/ace", package = "shinyAce")

   在名稱mode-custom.js 。

3. 然后你就設置好了，下面的代碼正確地突出顯示了Mark ：

    library(shiny) library(shinyAce) ui <- fluidPage( aceEditor("editor", value = "Mark", mode = "custom") ) server <- function(input, output, session){} shinyApp(ui, server)

   

---

更新

其實你不需要把js放在lib文件夾下，直接定義即可。 只需確保您使用ace.define並在aceEditor中使用模式的名稱即可：

library(shiny)
library(shinyAce)

htmlScript = "<script>\n ace.define('ace/mode/custom', [], function(require, exports, module) {\n var oop = require(\"ace/lib/oop\");\n var TextMode = require(\"ace/mode/text\").Mode;"
htmlScript = paste0(htmlScript,"\n var Tokenizer = require(\"ace/tokenizer\").Tokenizer;\n var CustomHighlightRules = require(\"ace/mode/custom_highlight_rules\").CustomHighlightRules;")
htmlScript = paste0(htmlScript,"\n\n var Mode = function() {\n this.HighlightRules = CustomHighlightRules;\n};\n oop.inherits(Mode, TextMode);\n\n (function() {\n\n}).call(Mode.prototype);\n\n exports.Mode = Mode;\n});")
htmlScript = paste0(htmlScript,"\n ace.define('ace/mode/custom_highlight_rules', [], function(require, exports, module) {\n var oop = require(\"ace/lib/oop\");\n var TextHighlightRules = require(\"ace/mode/text_highlight_rules\").TextHighlightRules;\n")
htmlScript = paste0(htmlScript,"\n var CustomHighlightRules = function() {\n\n var keywordMapper = this.createKeywordMapper({\n \"variable.language\": \"this\",\n \"keyword\": \"Mark|Ben|Bill|Thorn|ULL\",\n \"constant.language\": \"true|false|null\",\n \"customTokenName\": \"problem\"\n}, \"text\", true);\n")
htmlScript = paste0(htmlScript,"\n this.$rules = {\n\"start\": [\n{\nregex: \"\\\\w+\\\\b\",\n token: keywordMapper\n},\n]\n};\n this.normalizeRules()\n};\n\n oop.inherits(CustomHighlightRules, TextHighlightRules);\n\n")
htmlScript = paste0(htmlScript,"\nexports.CustomHighlightRules = CustomHighlightRules;\n});\n\nvar editor = ace.edit(\"editor\");\n\n editor.session.setMode(\"ace/mode/custom\");\n</script>")
  
ui <- fluidPage(
  aceEditor("editor", value="Mark", mode = "custom"), #Mark should be highlighted with blue color
  tags$body(HTML(htmlScript))
)

server <- function(input, output, session){}

shinyApp(ui, server)
``