在嵌入在R闪亮中的ACE编辑器中突出显示
我尝试突出显示嵌入在R闪亮应用程序中的ace编辑器中的一组单词。我遵循了Want to highlight/change color of certain words in Ace Editor?的建议，但在使用aceEditor()函数时，突出显示不起作用，这是我的应用程序所需要的。但是，如果我将aceEditor()函数替换为tags$body命令(如下所示)，高亮显示就会起作用。请看我下面的代码。我的问题是:有没有一种方法可以在aceEditor()函数中使用突出显示？
下面是一个单词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，它将显示为蓝色。
回答 1
Stack Overflow用户
发布于 2021-10-11 09:01:16
shinyAce包装了对ace库的调用。特别是定义语法突出显示的mode。我不是JavaScript专家，因此，我不知道aceEditor在哪里以及如何推翻了您的手动设置，但我知道如何让您的自定义样式工作。
- 创建包含以下内容的
.js文件：
ace.define('ace/ Mode /custom'，[]，function(require，exports，module) { var oop =require(“ace/Mode/oop”)；var TextMode = require("ace/mode/text").Mode；var Tokenizer = require("ace/tokenizer").Tokenizer；var CustomHighlightRules =require Mode= function() { this.HighlightRules = CustomHighlightRules；}；Oop.inherits(模式，TextMode)；(function() { }).call(Mode.prototype)；exports.Mode =模式；})；ace.define('ace/mode/custom_highlight_rules'，[]，function(require，exports，module) { var oop = TextHighlightRules (“ace/lib/oop”)；var TextHighlightRules=requirevar CustomHighlightRules = function() { var keywordMapper = this.createKeywordMapper({ "variable.language"："this"，"keyword"："Mark|Ben|Bill"，"constant.language"："true|false|null"，"customTokenName"：“问题”}，"text"，true)；this.$rules ={ "start"：{ regex："\w+\b"，token: keywordMapper }，}；this.normalizeRules() }；oop.inherits(CustomHighlightRules，TextHighlightRules)；exports.CustomHighlightRules = CustomHighlightRules；})；
特别要注意用define.代替ace.define
- 将文件放在所示的文件夹中
system.file("www/ace"，package = "shinyAce")
在mode-custom.js.的名字下
然后设置
- ，并且下面的代码正确地突出显示
Mark：
库(闪亮)库(ShinyAce) ui <- fluidPage( aceEditor(“编辑器”，值=“标记”，模式=“自定义”))服务器<- function(输入，输出，会话){} shinyApp(ui，服务器)
更新
实际上，您不需要将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)
``https://stackoverflow.com/questions/69518517
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号