Submit Pull Requests to HLJS / Prism for Verse Syntax Highlighting

General Feedback & Requests
, ,
1

Epic, please consider sharing the Textmate Grammar file used in the VS Code extension for Verse, and / or the custom implementation of Verse syntax used with HLJS on the documentation pages on this site. I’d like to be able to share Verse code on my own websites. I considered attempting to extract it from the VS Code extension but I’m unsure of Licensing issues. Would be ideal if its official.

2

Thank you for your feedback. While I cannot guarantee a response, I can confirm that this has been forwarded to the appropriate team.

1 Like
3

It looks like they use a private fork of highlight.js, which means you can probably rip their styles from the source and apply it yourself. Would be great if Epic could upstream those changes so everyone benefits.

.hljs.language-verse .hljs-invalid.verse_ {
  color: #f44747
}

.hljs.language-verse .hljs-comment.verse_,.hljs.language-verse .hljs-comment.line_.verse__,.hljs.language-verse .hljs-comment.block_.verse__ {
  color: #77b06b
}

.hljs.language-verse .hljs-constant.language_.verse__,.hljs.language-verse .hljs-constant.language_.path__.verse___ {
  color: #569cd6
}

.hljs.language-verse .hljs-constant.numeric_.verse__ {
  color: #c2ddb4
}

.hljs.language-verse .hljs-constant.regexp_.verse__ {
  color: #646695
}

.hljs.language-verse .hljs-constant.character_.escape__.verse___ {
  color: #b89047
}

.hljs.language-verse .hljs-string.verse_,.hljs.language-verse .hljs-string.quoted_.double__.verse___,.hljs.language-verse .hljs-string.quoted_.single__.verse___,.hljs.language-verse .hljs-string.tag_.verse__,.hljs.language-verse .hljs-string.value_.verse__ {
  color: #c09077
}

.hljs.language-verse .hljs-string.regexp_.verse__ {
  color: #d16969
}

.hljs.language-verse .hljs-text.verse_ {
  color: #dfc79f;
  font-style: italic
}

.hljs.language-verse .hljs-keyword.verse_,.hljs.language-verse .hljs-keyword.control_.verse__ {
  color: #569cd6
}

.hljs.language-verse .hljs-keyword.operator_.verse__,.hljs.language-verse .hljs-keyword.operator_.logical__.verse___,.hljs.language-verse .hljs-keyword.operator_.arithmetic__.verse___,.hljs.language-verse .hljs-keyword.operator_.comparison__.verse___ {
  color: #77afaf
}

.hljs.language-verse .hljs-keyword.other_.unit__.verse___ {
  color: #92a788
}

.hljs.language-verse .hljs-entity.name_.function__.verse___ {
  color: #e5c2ff
}

.hljs.language-verse .hljs-variable.verse_,.hljs.language-verse .hljs-variable.path_.verse__ {
  color: #b9d6ff
}

.hljs.language-verse .hljs-entity.name_.tag__.verse___ {
  color: #6f77a6
}

.hljs.language-verse .hljs-keyword.declaration_.verse__,.hljs.language-verse .hljs-punctuation.definition_.tag__.verse___ {
  color: #8499b7
}

.hljs.language-verse .hljs-storage.verse_,.hljs.language-verse .hljs-storage.type_.verse__,.hljs.language-verse .hljs-storage.modifier_.verse__ {
  color: #569cd6
}

.hljs.language-verse .hljs-emphasis.verse_ {
  font-style: italic
}

.hljs.language-verse .hljs-strong.verse_ {
  font-weight: 700
}

.hljs.language-verse .hljs-markup.underline_.verse__ {
  text-decoration: underline
}

.hljs.language-verse .hljs-markup.bold_.verse__,.hljs.language-verse .hljs-markup.heading_.verse__ {
  color: #569cd6;
  font-weight: 700
}

.hljs.language-verse .hljs-markup.italic_.verse__ {
  font-style: italic
}

.hljs.language-verse .hljs-markup.inserted_.verse__ {
  color: #b5cea8
}

.hljs.language-verse .hljs-markup.deleted_.verse__ {
  color: #ce9178
}

.hljs.language-verse .hljs-markup.changed_.verse__ {
  color: #569cd6
}

.hljs.language-verse .hljs-markup.inline_.raw__.verse___ {
  color: #ce9178
}

.hljs.language-verse .hljs-header.verse_ {
  color: navy
}

.hljs.language-verse .hljs-meta.diff_.header__.verse___,.hljs.language-verse .hljs-meta.preprocessor_.verse__ {
  color: #569cd6
}

.hljs.language-verse .hljs-meta.preprocessor_.string__.verse___ {
  color: #ce9178
}

.hljs.language-verse .hljs-meta.preprocessor_.numeric__.verse___ {
  color: #b5cea8
}
1 Like
4

Great find on the CSS but do you have the config with all the regex used to label each piece of code with the correct classes? Is this repo available on Github somewhere we can see?