如何使自己的在线“语法突出显示”代码编辑器从头开始 [英] How to make own online "syntax highlighted" code editor from scratch

问题描述

大家好。



我想知道如何在网页上使用带有颜色标记实用程序的代码编辑器。这样的实用程序的例子是ACE CLOUD9编辑器



主要问题是我如何用不同的颜色标记代码？我应该使用什么技术。我猜它发生在css的帮助下不确定...但是如何为代码片段分配颜色



例如当我们在visual studio中编写代码时turbo C或任何现代文本编辑器，如Notepad ++，它根据相关的文件扩展名为代码提供了漂亮的颜色。如何在不使用任何API的情况下在网页上实现相同的效果。



改进的问题：



我的动机问这个问题是要知道代码的每个字符或关键字如何被不同的颜色所蒙蔽，如下面的代码示例所示

Hello to all

I want to know how to make code editor with color markup utility to be used on a webpage. example of such utility is ACE CLOUD9 EDITOR

the main query is how i can markup code with different colors? what technique i should use. I guess it happens with the help of css not sure... but how can i assign colors to fragments of code

for example when we write code in visual studio or turbo C or any modern text editor like Notepad++ it provides nice colors to the code according to its associated file extension. How can one achieve same on a webpage without using any API.

IMPROVED QUESTION:

my motive to ask this question is to know how every character or keyword of code is blinded to different colors as shown on following code examples

/* Hello World code with syntax highlighted using different colors*/
#include <stdlib.h>
#include <stdio.h>

int main()
{
    printf("Hello World\n");
    return 0;
}

/ *没有语法荧光笔的Hello World代码* /

#include

#include



int main（）

{

printf（Hello World \ n）;

返回0;

}

/* Hello World code without syntax highlighter*/
#include
#include

int main()
{
printf("Hello World\n");
return 0;
}

推荐答案

最简单的方法非常简单，但从头开始这一切只意味着很多工作。



这是一个想法：不要使用常规文本框。您可以使用属性 contenteditable 创建任何块HTML元素，例如div或paragraph，可输入。其他HTML内容（带有格式属性的标签，如类，字体颜色等）可以通过修改任何元素的 innerHTML 的命令添加。我已经用基本的代码示例回答了这个问题：

http://www.codeproject.com/Answers/682802/How-can-i-insert-different-letters-with-different#answer1 [ ^ ]，

http：/ /www.codeproject.com/Answers/684812/changing-the-style-of-every-character-within-any-c#answer1 [ ^ ]。

-SA

The simplest approach is really very simple, but doing it all from scratch just means a lot of work.

Here is the idea: don't use a "regular" text box. You can make any block HTML element, such as div or paragraph, typeable, by using the attribute contenteditable. And other HTML content (tags with formatting attributes, such as classes, font colors, etc) could be added via commands modifying innerHTML of any element. I already answered this question, with rudimentary code samples:
http://www.codeproject.com/Answers/682802/How-can-i-insert-different-letters-with-different#answer1[^],
http://www.codeproject.com/Answers/684812/changing-the-style-of-every-character-within-any-c#answer1[^].

—SA

这篇关于如何使自己的在线“语法突出显示”代码编辑器从头开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！