[PR #78] [CLOSED] Syntax Highlighting for HTML, CSS, JS, XML, JSON and SVG #2400

New issue

Closed

opened 2026-03-17 00:06:20 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:06:20 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/78
Author: @AndrewBastin
Created: 8/28/2019
Status: ❌ Closed

Base: master ← Head: master

📝 Commits (4)

f16e75a Added prismjs dependency
0a140f9 Added syntax highlighting for html,xml,js,css,svg and json
93bd9a4 xhr status is outputed in a textarea when an error occurs in the request
90095e6 updated copy response to use the new syntax highlighting

📊 Changes

4 files changed (+109 additions, -4 deletions)

View changed files

📝 assets/css/styles.scss (+15 -2)
📝 package-lock.json (+46 -0)
📝 package.json (+1 -0)
📝 pages/index.vue (+47 -2)

📄 Description

Sorry for the delays, I am kinda busy with travelling these days...

So yeah, this PR adds syntax highlighting to the responses powered by Prism.
It looks at the returned content-type and applies the equivalent highlighting...

Well, I had to change a bit in the way how the responses are rendered, it relies on a property (responseHtml) now to render the raw html into the response box. Also, since textarea doesn't allow formatting, when an unsupported MIME type is returned, it defaults to the old textarea based layout but when a supported mime is returned, instead the content is rendered within a code tag inside a pre tag (ie, <pre><code>{{ content }}</code></pre>).

There are some stuff we will lose like the stretching textarea and stuff, and if there are no line breaks, the content box keeps expanding even out of the viewport. Someone should like update this PR with the ability to have proper overflow handling (I kinda don't want to work with the CSS on that one).

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/78 **Author:** [@AndrewBastin](https://github.com/AndrewBastin) **Created:** 8/28/2019 **Status:** ❌ Closed **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (4) - [`f16e75a`](https://github.com/hoppscotch/hoppscotch/commit/f16e75a95c7affeb18d9db06eedee2190660471d) Added prismjs dependency - [`0a140f9`](https://github.com/hoppscotch/hoppscotch/commit/0a140f9e5b4238bcdc291730c8dc61ca2ac54c7c) Added syntax highlighting for html,xml,js,css,svg and json - [`93bd9a4`](https://github.com/hoppscotch/hoppscotch/commit/93bd9a4988781eff8418a7e634970a0afc3289d6) xhr status is outputed in a textarea when an error occurs in the request - [`90095e6`](https://github.com/hoppscotch/hoppscotch/commit/90095e67574fe2fcc670dd1932b981953f9c823a) updated copy response to use the new syntax highlighting ### 📊 Changes **4 files changed** (+109 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `assets/css/styles.scss` (+15 -2) 📝 `package-lock.json` (+46 -0) 📝 `package.json` (+1 -0) 📝 `pages/index.vue` (+47 -2) </details> ### 📄 Description Sorry for the delays, I am kinda busy with travelling these days... So yeah, this PR adds syntax highlighting to the responses powered by [Prism](https://prismjs.com/). It looks at the returned content-type and applies the equivalent highlighting... Well, I had to change a bit in the way how the responses are rendered, it relies on a property (responseHtml) now to render the raw html into the response box. Also, since textarea doesn't allow formatting, when an unsupported MIME type is returned, it defaults to the old textarea based layout but when a supported mime is returned, instead the content is rendered within a code tag inside a pre tag (ie, `<pre><code>{{ content }}</code></pre>`). There are some stuff we will lose like the stretching textarea and stuff, and if there are no line breaks, the content box keeps expanding even out of the viewport. Someone should like update this PR with the ability to have proper overflow handling (I kinda don't want to work with the CSS on that one). --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>