Textarea with line numbers and code highlighter

Question

1.58/5 (4 votes)

See more:

Can anybody tell me the best plugin for adding line numbers and color code in the textarea? I have been using editarea plugin but am unable to customize it.

Posted 1-Oct-14 1:57am

Vidhya Raju

Updated 12-Sep-16 5:24am

Add a Solution

4 solutions

Solution 2

Simple and light weight plugin..Check http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html

Posted 1-Oct-14 3:41am

Shemeemsha (ഷെമീംഷ)

Comments

Vidhya Raju 1-Oct-14 9:46am

Its gud. But I need with code highlighter too

Shemeemsha (ഷെമീംഷ) 1-Oct-14 9:49am

Code highlighter means?

Vidhya Raju 1-Oct-14 9:50am

highlighting syntax with different colours

Shemeemsha (ഷെമീംഷ) 1-Oct-14 9:59am

Then you can use text editor.. CK-Editor is best..
But i am not sure it support line number..
I think you can customize the editor and you can add line number..
CK-Editor is free and very rich options are available..

http://ckeditor.com/demo#full

May be it will helpful ...

Vidhya Raju 1-Oct-14 9:58am

EditArea plugin
I have been using the above mentioned plugin. But I am unable to customize some part of js files.

Shemeemsha (ഷെമീംഷ) 1-Oct-14 10:02am

What are the problems you are facing...

Vidhya Raju 1-Oct-14 10:07am

<html>
<head>
<script language="Javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="Javascript" type="text/javascript">
// initialisation
editAreaLoader.init({
id: "my_text" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "both"
,word_wrap: true
,language: "en"
,syntax: "cpp"
,show_line_colors: true
,allow_toggle: false
,toolbar: "bold,italic,underline,|,sub,sup,|,ol,nl, | ,search, go_to_line, |, undo, redo"
,end_toolbar: "|,savet, |,styles, formats , imagess"
, plugins: "test"
});

</script>

</head>
<body>
<textarea id="my_text" style="height: 100%; width: 100%;" name="my_text">this is a testing purpose
</textarea>

</body>
</html>

This is my html file which calls editarea plugin. I could customize as I need except I couldnt to call js function(in html file) from plugin:test. Here plugin:test is the test.js file in which I have customized as per my requirement. But the only problem am facing is could not call other js file function from plugin js file

Shemeemsha (ഷെമീംഷ) 1-Oct-14 10:09am

You can add line number and code highlighter
Line Number
Code highlighter

Check this also

Vidhya Raju 1-Oct-14 10:18am

Thank you so much for your suggestion. But none of them as I expect

Shemeemsha (ഷെമീംഷ) 1-Oct-14 10:23am

Welcome :)
For code highlighting you can use "pre" tag..
Or you can implement your own scripts for that..May be take time...BOL (Y)
================================================================

Solution 1

Try these plugins :

http://steamdev.com/snippet/[^]

http://alexgorbatchev.com/SyntaxHighlighter/[^]

http://prismjs.com/plugins/line-numbers/[^]

https://marketplace.atlassian.com/plugins/jira.plugin.syntaxhighlighter.macro.syntaxplugin[^]

Posted 1-Oct-14 2:53am

Jems_007

Comments

Vidhya Raju 1-Oct-14 9:33am

Thanks for your suggestion. I need editable textarea. But those links which you suggested is a static textarea.

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

virang_21 · Accepted Answer · 2014-10-01T16:07:00

Solution 3

You can use CodeMirror Jquery plugin.

http://weblogs.asp.net/jongalloway/using-codemirror-to-add-c-syntax-highlighting-to-an-editable-html-textarea[^]

http://codemirror.net/[^]

Posted 1-Oct-14 16:07pm

virang_21

Jems_007 · Accepted Answer · 2014-10-01T22:42:00

Solution 4

http://users.dcc.uchile.cl/~jmunoz/[^]

http://codemirror.net/[^]

http://users.dcc.uchile.cl/~jmunoz/[^]

http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html[^]

http://ubuntuincident.wordpress.com/2013/09/26/html-add-syntax-highlight-to-textarea/[^]

Posted 1-Oct-14 22:42pm

Jems_007

Textarea with line numbers and code highlighter

4 solutions

Solution 2

Solution 3

Solution 4

Solution 1

Add your solution here

Preview 0

Textarea with line numbers and code highlighter

4 solutions

Solution 2

Solution 3

Solution 4

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us