kakawait / hugo-tranquilpeak-theme

A gorgeous responsive theme for Hugo blog framework
https://tranquilpeak.kakawait.com
GNU General Public License v3.0
926 stars 525 forks source link

Here's my implementation step, but without the grammar highlighting #414

Closed tolerant-hu closed 3 years ago

tolerant-hu commented 4 years ago

Configuration

create website

/usr/local/bin/hugo new site web

install Tranquilpeak

cd web/themes/ git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git

custom highlight.js

cd hugo-tranquilpeak-theme/src/scss/themes/
rm -f _hljs-tranquilpeak.scss

vim _hljs-custom.scss
pre > code {
  background: #f7f8f8;
  color: #aaa;
}

// Default inline code
code {
  background-color: #f7f8f8;
}

.codeblock--tabbed figcaption .tab.active {
    background: #002b36;
    color: #839496;
}

figure.highlight,
.codeblock {
    background: #002b36;
    color: #839496;

    figcaption {
        background: #002b36;
        color: #839496;
    }
    .gutter {
        background: #002b36;
        border-right-color: #f7f8f8;
        .line {
            color: #839496;
        }
    }
    // PUT YOUR THEME HERE
      /* Solarized Green */
  .keyword,
  .selector-tag,
  .addition {
    color: #859900;
  }

  /* Solarized Cyan */
  .number,
  .string,
  .meta .meta-string,
  .literal,
  .doctag,
  .regexp {
    color: #2aa198;
  }

  /* Solarized Blue */
  .title,
  .section,
  .name,
  .selector-id,
  .selector-class {
    color: #268bd2;
  }

  /* Solarized Yellow */
  .attribute,
  .attr,
  .variable,
  .template-variable,
  .class .title,
  .type {
    color: #b58900;
  }

  /* Solarized Orange */
  .symbol,
  .bullet,
  .subst,
  .meta,
  .meta .keyword,
  .selector-attr,
  .selector-pseudo,
  .link {
    color: #cb4b16;
  }

  /* Solarized Red */
  .built_in,
  .deletion {
    color: #dc322f;
  }

  .formula {
    background: #073642;
  }

  .emphasis {
    font-style: italic;
  }

  .strong {
    font-weight: bold;
  }
}

into tranquilpeak.scss
delete a row :  'themes/hljs-tranquilpeak',
cd ../../../
npm install
./node_modules/grunt/bin/grunt buildProd

cp exampleSite/config.toml ../../

create a page.md

hugo new post/page.md

vim content/post/page.md
---
title: "Page"
date: 2020-04-14T10:42:08+08:00
categories:
- category
- subcategory
tags:
- tag1
- tag2
keywords:
- tech
#thumbnailImage: //example.com/image.jpg
---

\```go
package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now\`)
    go println(len("hello world!"))
    return
}
\```

result

image

kakawait commented 4 years ago

Golang is not default lang supported by Highlight.js

Could you please doing something similar to https://github.com/kakawait/hugo-tranquilpeak-theme/issues/186#issuecomment-346593802

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.