5

When we put a single URL in a block of code on Stack Overflow, by default everything after // is treated as a comment, which doesn't look very good:

https://example.com/path1/?param1=A&param2=B#id1

This can be improved by using some explicit language format before code block e.g. <!-- language: lang-html -->, which gives this effect:

https://example.com/path1/?param1=A&param2=B#id1

and it's better than the previous one.

But I wonder if there is a formatting (or if could be added some new one) that would highlight some essential characters in the URL or even all of the URL components such as schema, user name, host, port, path, query parammeters and hash id along with their constituent characters, such as: ://, @, :, ?, &, =, # and possibly also encoded characters with % as well.

Here is a poor visualization of what I mean (unfortunately outside the code block):

https://username:password@example.com:80/path1/?param1=AA&param2=B%20B#id1

Of course, it would be great if individual URL elements could be distinguished by different colors.

8
  • I could use this feature, e.g. on this answer: stackoverflow.com/a/62803937/4217744 where it would be nice if the URL parameter were highlighted, because it is mainly about the answer. Jul 18, 2020 at 10:02
  • See meta.stackoverflow.com/questions/398403/… for how to highlight parts of code; I've edited that answer by way of a demo. Other styling generally gets sanitised out, see e.g. stackoverflow.com/a/62933511/3001761.
    – jonrsharpe
    Jul 18, 2020 at 10:08
  • 2
    URLs shouldn't have any formatting applied to them. Use lang-none. Jul 18, 2020 at 10:13
  • @CodyGray // is still treated as the start of a comment (or at least triggers grey text) with lang-none, though.
    – jonrsharpe
    Jul 18, 2020 at 10:15
  • 2
    @jonrsharpe That... seems like a bug. There shouldn't be any coloring or syntactic detection done for lang-none. Jul 18, 2020 at 10:16
  • 2
    "This can be improved by using some explicit language format before code block e.g. <!-- language: lang-html -->, which gives this effect:" - <!-- language: <whatever> --> no longer works after the commonmark migration. If you want to specify code block language, you'll have to use ```lang-none
    – Zoe Mod
    Jul 18, 2020 at 10:48
  • @jonrsharpe I just tried it and it doesn't seem to be treated as the start of a comment. Can you provide an example? I've never had any problems with lang-none.
    – 41686d6564
    Jul 18, 2020 at 11:51
  • @AhmedAbdelhameed I wondered if it was because the language comment doesn't work any more as Zoe mentioned, but I've updated this question to a code fence and still you can see the result
    – jonrsharpe
    Jul 18, 2020 at 11:54

1 Answer 1

6

With the recent transition to CommonMark, the new recommended way to disable syntax highlighting is the following:

```none
http://some-website.here/x/y/z
```

Result:

http://some-website.here/x/y/z

The old, deprecated <!-- language: xxx --> mode is still supported, but will be removed in the future.


With the above said, there isn't an highlighting theme specifically for what you are asking, since this is not some kind of special pattern that exists in any language. If you want to highlight parts of an URL, you can use HTML elements to do so, like this:

<pre>https://<b>username</b>:<i>password</i>@example.com:<i>80</i>/path1/?param1=<b><i>AA</i></b>&amp;param2=B%20B#id1</pre>

Result:

https://username:password@example.com:80/path1/?param1=AA&param2=B%20B#id1

This unfortunately does not support changing the color, but it's something.

Notice the bold "username", italics "password" and bold+italics "AA". Also notice that you might need to escape & into its relative HTML entity &amp;.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .