cURL language

[Viiruus]

Hello :-)

Is there a way to highlight cURL language?

Thanks!

[Golmote]

Hi! Could you give an example of what you mean by "cURL language" ? AFAIK it's not a language...

[Viiruus]

Hello @Golmote :-) thanks for your quick answer!
I would like to highlight cURL request like Stripe does here.

[Golmote]

I see. The closest we have would probably be the Bash component. But I'm afraid it won't do such a great job. :/

[Viiruus]

Yes, I was testing with the bash language and you're right, it doesn't seem to be good enough.
Look at my screenshot.

[Golmote]

Well, actually I expected something worse. The easy thing we can do to improve highlighting is to add the curl keyword to the list of common bash functions.

[Golmote]

As previously stated, I've added curl to the list of common functions in the Bash component.

If you really want to highlight cURL the way Stripe does it, you can still take a look at their custom language definition: https://stripe.com/assets/compiled/js/sprockets-js-documentation-c4b3ec3ed7e62075f018.min.js.

// Prism curl
Prism.languages.curl = {
  'curl': /\bcurl\b/,
  'url': /https?:[a-zA-Z0-9:.?=\/\-_{}]*/,
  'parameter': {
    pattern: /[A-Za-z0-9\[\]-_]+ *(?=[=])/,
  },
  'value': [{
    pattern: /([=])([A-Za-z0-9-_.]*)/,
    lookbehind: true,
  }, {
    pattern: /(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
  }, {
    pattern: /(\-u )([A-Za-z0-9-_.{}]*)/,
    lookbehind: true,
  }],
  'option': / *-[a-zA-Z]*\b/,
};

[Viiruus]

@Golmote I took a look at my previous code and I found a solution for the Bash language:
I added this part of code to the prism.js library:

Prism.languages.insertBefore("bash", "operator", {
  "api-key": {
    pattern: /(?:-u )([a-zA-Z0-9_]+)/g,
    inside: {
      "request-flag": /(^-u)/g
    }
  },
  "request-param": {
    pattern: /(?:-d )([a-zA-Z0-9]+)/g,
    inside: {
      "request-flag": /(^-d)/g
    }
  },
  "request-value": {
    pattern: /(?:=)(.*?)(?:\n|\\)/g,
    inside: {
      operator: /(^=)|(\\$)/g
    }
  }
})

Prism.languages.insertBefore("bash", "number", {
  "request-url": {
    pattern: /(?:^curl )(.*?)(?:\n|\\)/g,
    inside: {
      operator: /(\\$)/g,
      keyword: /(^curl)/g
    }
  }
});

and this part of SASS code (or CSS):

.include-prompt code.language-bash:before
  content: "$ "
  color: #939da3

pre
  margin: 0
  padding: 20px 40px
  background: #272b2d
  border-radius: 5px
  font-family: Source Code Pro,Menlo,monospace
  font-size: 13px
  line-height: 1.5em
  font-weight: 500
code, pre
  color: #d0d0d0
  direction: ltr
  font-family: monospace
  text-align: left
  white-space: pre-wrap
  word-break: break-word
  word-spacing: normal
  -moz-tab-size: 4
  -o-tab-size: 4
  tab-size: 4
  -webkit-hyphens: none
  -moz-hyphens: none
  -ms-hyphens: none
  hyphens: none
code .token
  &.cdata, &.comment, &.doctype, &.prolog
    color: #777279
pre .token
  &.cdata, &.comment, &.doctype, &.prolog
    color: #777279
code
  .namespace, .token.punctuation
    color: #d0d4d7
pre
  .namespace, .token.punctuation
    color: #d0d4d7
code .token
  &.constant, &.deleted, &.property, &.symbol, &.tag
    color: #ebde68
pre .token
  &.constant, &.deleted, &.property, &.symbol, &.tag
    color: #ebde68
code .token
  &.boolean, &.number
    color: #77bcd7
pre .token
  &.boolean, &.number
    color: #77bcd7
code .token
  &.attr-name, &.builtin, &.char, &.inserted, &.selector
    color: #ebde68
pre .token
  &.attr-name, &.builtin, &.char, &.inserted, &.selector
    color: #ebde68
code .token
  &.json-key, &.string
    color: #c1ef65
pre .token
  &.json-key, &.string
    color: #c1ef65
code
  .language-css .token.string, .style .token.string
    color: #d0d4d7
  .token
    &.entity, &.url, &.variable
      color: #d0d4d7
pre
  .language-css .token.string, .style .token.string
    color: #d0d4d7
  .token
    &.entity, &.url, &.variable
      color: #d0d4d7
code .token.operator, pre .token.operator
  color: #f099a6
code .token.json-string, pre .token.json-string
  color: #d0d0d0
code .token
  &.atrule, &.attr-value
    color: #ebde68
pre .token
  &.atrule, &.attr-value
    color: #ebde68
code .token
  &.api-key, &.request-url, &.request-value
    color: #c1ef65
pre .token
  &.api-key, &.request-url, &.request-value
    color: #c1ef65
code .token.keyword, pre .token.keyword
  color: #ebde68
code .token.request-flag, pre .token.request-flag
  color: #d0d0d0
code .token.request-param, pre .token.request-param
  color: #f099a6
code .token
  &.important, &.regex
    color: #ebde68
pre .token
  &.important, &.regex
    color: #ebde68
code .token.important, pre .token.important
  font-weight: 700
code .token.entity, pre .token.entity
  cursor: help

Hope it will help someone 😄

[chakrihacker]

Why not add this to PrismJS this would be an amazing PR

[mAAdhaTTah]

@chakrihacker If you're interested in opening a PR, we're always open to new language additions.

[mmoulder]

This would be awesome to add cURL syntax highlighting. Almost every REST API has cURL examples, it would solve so many issues.