Problems with Custom Color Codes

[cschwem2er]

Configuration

• Operating system with its version: Windows 10
• Browser with its version: Google Chrome Latest Version
• Hugo version: latest version
• Tranquilpeak version: latest version

Hi,

first of all many thanks for creating this awesome theme. I want to use it for a coding blog but have no experience with .scss files yet and unfortunately can't get your instructions to work for custom syntax highlighting. These are the instructions:

• Get your theme here : Highlight.js theme or create yours
• Follow guidelines in source/scss/themes/hljs-custom.scss file
• Build the theme with npm run prod or grunt buildProd. Learn more about Grunt tasks : Grunt tasks

I tried to use the monokai theme (see code below) and noticed two issues:

• npm run prodthrew an error: npm ERR! [email protected] prod: grunt buildProd npm ERR! Exit status 99
• One instruction indicates " 6. Comment line 61 ('themes/tranquilpeak',) of source/_css/tranquilpeak.scss file". First, this file does not exist for me, I only find tranquilpeak.scss src/scss/. Second, line 61 is an empty line in that file, so I guess you're talking about the last lines in that file unter the last @import statement.

Could you please show or provide access to the two corrected files, tranquilpeak.scss and build theme for my .css code below as an example? This might also be helpful for other people.

/*

Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #23241f;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}

[kakawait]

Hi @methodds

Thank for your interest. I will not give you the final answer today because I have to check more thing but:

About npm run prod did you install pre-req https://github.com/kakawait/hugo-tranquilpeak-theme/blob/31c71da9f5b37972ea649d7ae1b54c82e0d353e4/docs/developer.md#requirements? And do you have more log?

You're true instruction is not correct because is bad about Hexo theme and not Hugo theme.

I will help you more soon, because I've to tried by myself first :)

[cschwem2er]

Many thanks for helping me out :) I did install both hugo and grunt CLI before. But to be honest, given how few knowledge I have about this, it is very likely that I made a mistake in the step of adjusting the files beforehand.

[kakawait]

I think when #242 will be fixed it will be more easy to overwrite HLjs theme

[kakawait]

related to #320