[GH-ISSUE #235] Extend syntax highlighting with ACE for pre-request script textarea #85

Closed
opened 2026-03-16 13:16:55 +03:00 by kerem · 14 comments
Owner

Originally created by @nickpalenchar on GitHub (Oct 31, 2019).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/235

Originally assigned to: @AndrewBastin on GitHub.

Related to #218

Is your feature request related to a problem? Please describe.
No syntax highlighting might confuse users in pre-request scritps. It could look like they're writing in plaintext, and common typos won't be as apparent.

Describe the solution you'd like
Simple syntax highlighting. Things like basic javascript types should be highlighted. Nothing too fancy needed.

Describe alternatives you've considered
Going without, but syntax highlighting looks more l33t.

Additional context
@sblasa has done some research on this after reaching out on #91

Originally created by @nickpalenchar on GitHub (Oct 31, 2019). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/235 Originally assigned to: @AndrewBastin on GitHub. Related to #218 **Is your feature request related to a problem? Please describe.** No syntax highlighting might confuse users in pre-request scritps. It could look like they're writing in plaintext, and common typos won't be as apparent. **Describe the solution you'd like** Simple syntax highlighting. Things like basic javascript types should be highlighted. Nothing too fancy needed. **Describe alternatives you've considered** Going without, but syntax highlighting looks more l33t. **Additional context** @sblasa has done some research on this after reaching out on #91
kerem 2026-03-16 13:16:55 +03:00
Author
Owner

@nickpalenchar commented on GitHub (Oct 31, 2019):

@sblasa are you still interested in taking this?

<!-- gh-comment-id:548164959 --> @nickpalenchar commented on GitHub (Oct 31, 2019): @sblasa are you still interested in taking this?
Author
Owner

@liyasthomas commented on GitHub (Oct 31, 2019):

HighlightJS is already implemented in the PW.
Introduced in #142
https://highlightjs.org/

<!-- gh-comment-id:548165990 --> @liyasthomas commented on GitHub (Oct 31, 2019): HighlightJS is already implemented in the PW. Introduced in #142 https://highlightjs.org/
Author
Owner

@sblasa commented on GitHub (Nov 1, 2019):

@sblasa are you still interested in taking this?

@liyasthomas and @nickpalenchar yes, I'm still interested in this. So, I'm using hiighlight.js instead, since highlight is already there; therefore use that. to extend syntax highlighting for pre-request script.

<!-- gh-comment-id:548629675 --> @sblasa commented on GitHub (Nov 1, 2019): > @sblasa are you still interested in taking this? @liyasthomas and @nickpalenchar yes, I'm still interested in this. So, I'm using hiighlight.js instead, since highlight is already there; therefore use that. to extend syntax highlighting for pre-request script.
Author
Owner

@liyasthomas commented on GitHub (Nov 5, 2019):

@sblasa thought I should ping you to get the latest updates on this issue...! If you need any help, ping me.

<!-- gh-comment-id:549848626 --> @liyasthomas commented on GitHub (Nov 5, 2019): @sblasa thought I should ping you to get the latest updates on this issue...! If you need any help, ping me.
Author
Owner

@sblasa commented on GitHub (Nov 6, 2019):

@liyasthomas Hi! I pulled down the latest changes--and running on my local. I'll ping you shortly for some help. Thanks!

<!-- gh-comment-id:550144208 --> @sblasa commented on GitHub (Nov 6, 2019): @liyasthomas Hi! I pulled down the latest changes--and running on my local. I'll ping you shortly for some help. Thanks!
Author
Owner

@sblasa commented on GitHub (Nov 11, 2019):

@liyasthomas Hi, noticed that the reference for highlight.js will be removed from pages/index.vue with Replace highlight.js with ace editor #292 . So we probably won't use highlight.js to create the feature since it has been removed? Use Ace Editor instead? Thanks!

<!-- gh-comment-id:552304048 --> @sblasa commented on GitHub (Nov 11, 2019): @liyasthomas Hi, noticed that the reference for highlight.js will be removed from pages/index.vue with Replace highlight.js with ace editor #292 . So we probably won't use highlight.js to create the feature since it has been removed? Use Ace Editor instead? Thanks!
Author
Owner

@liyasthomas commented on GitHub (Nov 11, 2019):

@sblasa sorry for the delayed response!
HighlightJS is being replaced with ace. Its implementation is much simpler and have out of the box support for textarea. Please use ace for pre-request scripts.

Or wait untill https://github.com/liyasthomas/postwoman/pull/292 is merged so you don't have any trouble importing lib.

<!-- gh-comment-id:552305506 --> @liyasthomas commented on GitHub (Nov 11, 2019): @sblasa sorry for the delayed response! HighlightJS is being replaced with ace. Its implementation is much simpler and have out of the box support for textarea. Please use ace for pre-request scripts. Or wait untill https://github.com/liyasthomas/postwoman/pull/292 is merged so you don't have any trouble importing lib.
Author
Owner

@sblasa commented on GitHub (Nov 12, 2019):

@liyasthomas Okay, thanks for confirming. 👍

<!-- gh-comment-id:552750022 --> @sblasa commented on GitHub (Nov 12, 2019): @liyasthomas Okay, thanks for confirming. 👍
Author
Owner

@liyasthomas commented on GitHub (Nov 12, 2019):

@sblasa ace is in production (master branch) now! Refer the code snippets from there.

<!-- gh-comment-id:552752892 --> @liyasthomas commented on GitHub (Nov 12, 2019): @sblasa ace is in production (master branch) now! Refer the code snippets from there.
Author
Owner

@AndrewBastin commented on GitHub (Nov 30, 2019):

Yeah, I tried implementing two-way binding (v-model) onto the Ace Editor component (components/ace-editor.vue) but it had some issues with the re-render (cursor keeps staying in the first col of first line), so I dropped it...

Can somebody go into fixing that ? Or can we move Ace Editor stuff to a library (like a Ace Editor wrapper for Vue)

<!-- gh-comment-id:559905565 --> @AndrewBastin commented on GitHub (Nov 30, 2019): Yeah, I tried implementing two-way binding (v-model) onto the Ace Editor component ([components/ace-editor.vue](https://github.com/liyasthomas/postwoman/blob/master/components/ace-editor.vue)) but it had some issues with the re-render (cursor keeps staying in the first col of first line), so I dropped it... Can somebody go into fixing that ? Or can we move Ace Editor stuff to a library (like a Ace Editor wrapper for Vue)
Author
Owner

@liyasthomas commented on GitHub (Nov 30, 2019):

I think v-model doesn't work on Ace. I too tried and failed doing it.

<!-- gh-comment-id:559905765 --> @liyasthomas commented on GitHub (Nov 30, 2019): I think v-model doesn't work on Ace. I too tried and failed doing it.
Author
Owner

@AndrewBastin commented on GitHub (Nov 30, 2019):

Can we look into libraries providing Vue wrappers from Ace ?

<!-- gh-comment-id:559906733 --> @AndrewBastin commented on GitHub (Nov 30, 2019): Can we look into libraries providing Vue wrappers from Ace ?
Author
Owner

@liyasthomas commented on GitHub (Nov 30, 2019):

@AndrewBastin https://stackoverflow.com/questions/57645961/vue-apply-v-model-on-user-defined-component-which-use-ace-editor there's a sollution.

<!-- gh-comment-id:559907018 --> @liyasthomas commented on GitHub (Nov 30, 2019): @AndrewBastin https://stackoverflow.com/questions/57645961/vue-apply-v-model-on-user-defined-component-which-use-ace-editor there's a sollution.
Author
Owner

@AndrewBastin commented on GitHub (Nov 30, 2019):

Ooooh, if nobody is working on it, I will try implementing it and migrate the necessary views.

If nobody is working on it, can I get an assign ?

<!-- gh-comment-id:559907480 --> @AndrewBastin commented on GitHub (Nov 30, 2019): Ooooh, if nobody is working on it, I will try implementing it and migrate the necessary views. If nobody is working on it, can I get an assign ?
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#85
No description provided.