仅用于代码编辑器

Question

在我以前的应用程序中，当涉及到文本编辑时，我使用了WYSIWYG editor for Bootstrap gem。

现在，我正在构建一个只编辑代码(主要是js代码)的应用程序。

WYSIWYG editor for Bootstrap gem的问题在于它没有任何代码标记/颜色或代码行。

如果我需要使用gem/plugin，我可以在没有任何gem/plugin和/或什么是最好的选择的情况下实现这一点吗？

类似于下面的图像

​

​

Answer 1

有一些编辑器，如ace.c9或共镜，您可以使用，但是对于我来说，它们太重了，因为我只打算使用它进行预览。

我所做的就是通过使用HTML & CSS来构建自己的系统。

我使用<pre>插入代码，并添加了一些自己的设置，如<var></var>、<param></param>、<val></val>和添加了自己的css。

pre var{color:green;}
pre param{color:blue;}
pre val{color:yellow;}


<pre>
var <var>width</var>: <val>300</val>;
<param>params</param>{
  Some code
}
</pre>

使用精益编辑器将使它更容易，并有更多的选择，但如果您正在寻找使用一个简单的设置，您可以做我做的。