How did you convert css to stylus for highlight.js theme ?

[noraj]

Please make sure these boxes are checked before submitting your issue. Thank you!

• I have inited and configurated the blog according to Hexo official documentation;
• I have read the Theme Wiki carefully;
• I have looked up the Issues and found no duplicate issues.

Hello,

If I pick the first highlight theme named agate,

The highlight.js css

/*!
 * Agate by Taufik Nurrohman <https://github.com/tovic>
 * ----------------------------------------------------
 *
 * #ade5fc
 * #a2fca2
 * #c6b4f0
 * #d36363
 * #fcc28c
 * #fc9b9b
 * #ffa
 * #fff
 * #333
 * #62c8f3
 * #888
 *
 */

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #333;
  color: white;
}

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

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

.hljs-tag {
  color: #62c8f3;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
  color: #ade5fc;
}

.hljs-string,
.hljs-bullet {
  color: #a2fca2;
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
  color: #ffa;
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: #d36363;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #fcc28c;
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
  color: #888;
}

.hljs-regexp,
.hljs-link {
  color: #c6b4f0;
}

.hljs-meta {
  color: #fc9b9b;
}

.hljs-deletion {
  background-color: #fc9b9b;
  color: #333;
}

.hljs-addition {
  background-color: #a2fca2;
  color: #333;
}

.hljs a {
  color: inherit;
}

.hljs a:focus,
.hljs a:hover {
  color: inherit;
  text-decoration: underline;
}

The stylus css you embed :

/*!
 * Agate by Taufik Nurrohman <https://github.com/tovic>
 * ----------------------------------------------------
 *
 * #ade5fc
 * #a2fca2
 * #c6b4f0
 * #d36363
 * #fcc28c
 * #fc9b9b
 * #ffa
 * #fff
 * #333
 * #62c8f3
 * #888
 *
 */

.highlight
    color: white
    background: #333
    .code
        .name,
        .strong
            font-weight: bold

        .code,
        .emphasis
            font-style: italic

        .tag
            color: #62c8f3

        .variable,
        .template-variable,
        .selector-id,
        .selector-class
            color: #ade5fc

        .string,
        .bullet
            color: #a2fca2

        .type,
        .title,
        .section,
        .attribute,
        .quote,
        .built_in,
        .builtin-name
            color: #ffa

        .number,
        .symbol,
        .bullet
            color: #d36363

        .keyword,
        .selector-tag,
        .literal
            color: #fcc28c

        .comment,
        .deletion,
        .code
            color: #888

        .regexp,
        .link
            color: #c6b4f0

        .meta
            color: #fc9b9b

        .deletion
            background-color: #fc9b9b
            color: #333

        .addition
            background-color: #a2fca2
            color: #333

        .highlight a
            color: inherit

        .highlight a:focus,
        .highlight a:hover
            color: inherit
            text-decoration: underline

If I use a css to stylus converter I can get :

.hljs
  display block
  overflow-x auto
  padding 0.5em
  background #333
  color white
  a
    color inherit

.hljs-name,
.hljs-strong
  font-weight bold

.hljs-code,
.hljs-emphasis
  font-style italic

.hljs-tag
  color #62c8f3

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class
  color #ade5fc

.hljs-string,
.hljs-bullet
  color #a2fca2

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name
  color #ffa

.hljs-number,
.hljs-symbol,
.hljs-bullet
  color #d36363

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal
  color #fcc28c

.hljs-comment,
.hljs-deletion,
.hljs-code
  color #888

.hljs-regexp,
.hljs-link
  color #c6b4f0

.hljs-meta
  color #fc9b9b

.hljs-deletion
  background-color #fc9b9b
  color #333

.hljs-addition
  background-color #a2fca2
  color #333

.hljs a:focus,
.hljs a:hover
  color inherit
  text-decoration underline

But I can see class are not the same and your stylus is more nested.

So how did you convert the original css to this stylus ? By hand or with a tool ?

Because the version of highlight.js you embed is not up to date and I wanted to help you to update it.

[ppoffice]

@shark-oxi
Actually I manually editted these themes using Sublime Text. There is no such conversion tool. 😄
But pull request is always welcome if you update some of these themes.

[noraj]

It's a lot of work to manually keep them up to date, why don't you use original css version ?

[ppoffice]

@shark-oxi
Because I supposed Stylus cannot compile pure css files......

[noraj]

I will check that. But for example in scss file you can write pure css so in my opinion stylus can support pure css to, I will have a look and will inform you.

[noraj]

@ppoffice
I don't know Stylus or JavaScript, but from my point of view it's possible to import pure css files in any css rendered like sass, scss, less or stylus.
Maybe you have to change a variable in index.style or maybe you just need to tell to the stylys renderer plugin to include css.
Or maybe just use @require 'something.css' or @include 'something.css' with some dynamic variable instead of hardcoded filename.
Maybe this command can help you : stylus --include-css index.styl.
Or this gulp piece of code to merge all css friles from a folder to one single css file :

    gulp.src('./app/styl/style.styl')
    .pipe(stylus({
        'include css': true
    }))
    .pipe(gulp.dest('./dist/css'));

Or maybe more relevant is this post that have exactly the same problematic as us : Gulp: Compile Stylus and concat with pure CSS.

Note : manually translate all pure css file of highlightjs style to stylus file is just impossible to maintain/update. From my opinion the easiest way is to keep pure css file from highlightjs with one of the method described previously. If you had a good reason to convert pure css to stylus so use the stylus command to convert css to stylus. But in any case don't do it manually.

[pacientes]

Is this updated?

[ppoffice]

@pacientes No. There will be a major implementation overhaul for Hueman and this issue is no longer tracked.

[noraj]

There will be a major implementation overhaul for Hueman

Oh I'm excited to see it released!