Dig markdown theme from scratch – Sister Doutom

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Upgrade Win11 these days, from zero to have more than N appearance opportunities. The first two weeks of The game are over, so we will create a game theme from scratch. We will try to restore more details in the limited time. The theme is really from scratch.

The first step is to prepare the preconditions

To complete a gold digger theme, here are the prerequisites we need:

A normal Github account

If you don’t have one, you can open Github and register one by yourself. The process is relatively simple. Let’s go to the next step

* Version control toolsGit

You can go to Git’s official website and download your own platform architecture directly to install it

* Code tools

Popular Code tools include WebStorm/IntelliJ IDEA or Visual Studio Code. Here, we use IntelliJ IDEA for development. We can open the official website of IntelliJ IDEA, choose download and install directly

Here I recommend another way, using Toolbox App for download and installation. This Toolbox App is very useful, and you can directly download and manage all JetBrains related development tools

Here we have downloaded Android Studio and IntelliJ IDEA, if you want to install other applications, you can directly click install, management is particularly convenient, it also supports rollback version, other functions to experience

• • Nodejs

Here we go to the Nodejs website, see your preferences, and choose the LTS version or the latest version

Here I also recommend using the Node management tool NVM-Windows to manage the Node version. Let’s go to the Release page and download the latest version and install it, which I have installed here

Here I need to install the latest LTS long term support version, run Windows Terminal as an administrator, and then run NVM install LTS, which will automatically install the latest LTS Node version, as well as the latest NPM

nvm install lts
Copy the code

To install the latest version, you can run NVM install latest. For more information, see the nVM-Windows documentation

After Node is installed, I prefer to use YARN for package management. Run NPM install -g yarn to install YARN. You can also download yarn from the official website. Click to download the latest version and install directly.

Step two: Coding

Cloning project

Let’s open up the nuggets theme template, hit Use This Template,

Here we need to fill in the name of our repository, along with other relevant information, and then click Create Repository from Template to Create.

I have pre-created the juejin-markdown-theme-Maidragon repository, copy the link

Open our IntelliJ IDEA and click Get from VCS

Fill in the address we just pasted and select the project location and name

Click Clone to complete the download. The project is opened and completed. The structure is as follows

To get started

We will rename juejin. SCSS to maidragon. SCSS, then edit the package.json file, replace the contents with our own, and add a Preview script to make debugging easier. NPX juejin-theme-devtool maidragon.scss is a tool for exploring the theme of gold nuggets

{
  "name": "juejin-markdown-theme-maidragon"."author": "iota9star"."homepage": "https://github.com/iota9star/juejin-markdown-theme-maidragon"."private": true."license": "MIT"."scripts": {
    "preview": "npx juejin-theme-devtool maidragon.scss"
  },
  "dependencies": {
    "bytemd": "^ 1.2.0"}}Copy the code

Now we execute YARN Install and wait for the package to complete.

Click the “Run” button and execute first to see the effect

Open the link and let’s take a look at the original first

Clean and clean, without a trace of fancy, now we open sister Dragon official website, look for theme color and so on

So that’s about it. Now let’s style it from the top down. Let’s start with the background

.markdown-body {
  word-break: break-word;
  line-height: 1.75;
  font-weight: 400;
  font-size: 15px;
  overflow-x: hidden;
  color: $-font-color;
  background-image: url($-bg);
  background-size: 100% auto;
  background-repeat: repeat;
}
Copy the code

This is going to look a little silly. Let’s add two more sentences

margin: 0 -2rem;
padding: 0 2rem;
Copy the code

That looks good. Now I’m going to add some magic to H1

h1 {
  color: $-green;
  font-size: 30px;
  margin-bottom: 5px;
  align-self: center;
  position: relative;
  z-index: 0;

  &:before, &:after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &:before {
    top: -24px;
    left: -36px;
    width: 96px;
    height: 96px;
    background-image: url($-hat);
    transform: rotate(-36deg);
  }

  &:after {
    top: -36px;
    right: -78px;
    width: 78px;
    height: 78px;
    background-image: url($-dragon);
    z-index: -1; }}Copy the code

Now add magic to the rest of the h2, H3, H4, H5, h6, it’s a little ugly if it’s too complicated, so let’s keep it simple

h2.h3.h4.h5.h6 {
  &:before {
    display: inline-block;
    background-color: rgba($-orange.87);
    z-index: -1;
    transition: border-radius .3s;
  }

  &:hover {
    &:before {
      border-radius: 50%;
    }

    &:after {
      animation: shakeit 0.3 s; }}}h2 {
  font-size: 24px;
  border-bottom: 4px solid rgba($-green.36);
  padding-bottom: 12px;

  &:before {
    width: 16px;
    height: 16px;
    left: -4px;
  }

  &:after {
    bottom: 0;
    right: 0;
    width: 36px;
    height: 56px;
    background-image: url($-dragon);
    z-index: -1; }}h3 {
  font-size: 18px;
  padding-bottom: 0;

  &:before {
    width: 14px;
    height: 14px;
    left: -4px; }}h4 {
  font-size: 16px;

  &:before {
    width: 12px;
    height: 12px;
    left: -4px; }}h5 {
  font-size: 15px;

  &:before {
    width: 10px;
    height: 10px;
    left: -4px; }}h6 {
  margin-top: 5px;

  &:before {
    width: 8px;
    height: 8px;
    left: -4px; }}Copy the code

Next to add magic are paragraphs, which have nothing to say for words

text-align: justify;
color: $-font-color;
Copy the code

The next one is the table, so let’s see what it looks like

table {
  font-size: 13px;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: solid 4px rgba($-green.0.38);
  border-collapse: collapse;
  position: relative;
  z-index: 1;
  margin-top: 48px;

  &:after {
    width: 100%;
    height: calc(100% + 48px);
    background-image: url($-dragon);
    background-position: right;
    z-index: -1;
    content: "";
    bottom: 0;
    right: -12px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.24;
  }

  thead {
    background: rgba($-green.0.2);
    color: $-font-color;
    text-align: left;
  }

  tr:nth-child(2n) {
    background-color: rgba($-green.0.1);
  }

  th.td {
    padding: 12px 16px;
    line-height: 24px;
  }

  td {
    min-width: 100px; }}Copy the code

The following effects are applied to the various character line codes

del {
  text-decoration: none;
  position: relative;
  z-index: 1;

  &:before {
    content: "";
    left: -4px;
    right: -4px;
    height: 6px;
    background-color: rgba($-orange.48);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    border-radius: 2px;
  }
  &:hover{
    &:before{
      background-color: rgba($-orange.96); }}}code {
  font-family: $monospace-font;
  word-break: break-word;
  border-radius: 2px;
  overflow-x: auto;
  background-color: rgba($-green.2);
  color: $-dark-green;
  font-size: 0.72 em;
  padding: 0.2 em 0.48 em;
  margin: 0 0.48 em;
  line-height: 1.75;
}
Copy the code

Arrange your pictures so that they are simple and centered

img {
  max-width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

Next up is the list, restyled, and simply dealt with

ol.ul {
  padding-left: 2rem;

  li {
    margin-bottom: 0;
    list-style: inherit;
    position: relative;
    z-index: 1;

    &::marker {
      color: $-green;
    }

    input[type="checkbox"] {
      background-color: transparent ! important;
      color: transparent ! important;
      border: none ! important;
      appearance: none;
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        left: 0;
        top: 5px;
        border: 2px solid rgba($-orange.87);
      }

      &:checked:after {
        content: "";
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        z-index: 1;
        width: 6px;
        height: 3px;
        left: 3px;
        top: 11px;
        position: absolute;
        transform: translateY(-50%) rotate(-45deg);
      }

      &:checked:before {
        background-color: $-green;
        border-color: $-green; }} &.task-list-item {
      list-style: none;
      padding-left: 20px;

      ul.ol {
        margin-top: 0; }}}ul.ol {
    margin-top: 3px; }}ol > li{&::marker {
    color: $-green;
    font-weight: bold;
    font-style: italic; }}ol li {
  padding-left: 6px;
}
Copy the code

The next one is links

a {
  text-decoration: none;
  color: $-green;
  background-color: rgba(255.255.255.9);
  position: relative;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all .3s;
  font-size: 13px;
  margin: 0 6px;
  z-index: 0;

  &:before, &:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-radius: 50%;
  }

  &:before {
    right: 0;
    top: 0;
    transition: all .4s;
    z-index: 1;
  }

  &:after {
    left: 0;
    bottom: 0;
    transition: all .3s;
    z-index: -2;
  }

  &:hover,
  &:active {
    color: white;
    background-color: $-green;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 12px;

    &:before {
      top: -4px;
      right: -4px;
      width: 8px;
      height: 8px;
      background-color: rgba($-red.87);
    }

    &:after {
      bottom: -4px;
      left: -6px;
      width: 12px;
      height: 12px;
      background-color: rgba($-orange.87); }}}Copy the code

There is a final quote

blockquote { color: #444; margin: 22px 0; Padding: 1.6 rem; background-color: rgba($-green, .1); position: relative; border-radius: 36px 16px 16px 16px; Transition:.2s Cubic bezier(.18,.89,.52, 1.94); &:hover {transform: scale(1.05) rotate(3deg); } &:before { position: absolute; content: ""; width: 36px; height: 36px; background-image: url($-hover); z-index: 1; left: -8px; top: -8px; } &::after { display: block; Content: '"'; font-weight: bold; font-size: 56px; height: 56px; color: $-green; position: absolute; right: -16px; bottom: 0; } & > p { margin: 10px 0; }}Copy the code

Now it’s basically OK, take a look at all the effects, some dynamic effect screenshots can not be cut, time problem, first, let’s submit a wave of code

toThe nuggets theme PR

We start with a juejin-markdown-themes fork

After the fork succeeds, we clone to local as before

Git checkout -b maidragon creates a branch of Maidragon and modifs it as documented

In themes.js, fill in the information related to the theme.js, where the ref can be viewed by running git branch -vv

maidragon: {
  owner: 'iota9star'.repo: 'juejin-markdown-theme-maidragon'.path: 'maidragon.scss'.ref: '10d038a'
}
Copy the code

Finally, add your own information to readme. md and submit the code

Now let’s open our storehouse juejin-Markdown-Themes and click Compare & Pull Request to create a PR

There’s nothing we need to change here, just click Create pull Request submit, okay

We just need to wait for the approval now

conclusion

• Contributing themes is fairly simple and requires few steps. Hopefully more and more people will contribute to the theme

• I hope I can review this theme, theme feeling or good, more refreshing.

• We can preview the effect here, just change the theme to Maidragon and preview it online

If the article is helpful to you, welcome to like, comment, pay attention to, collect, share, your support is my code word power, thank you!! 🌈

Finally, you can click here to join the QQ group FlutterCandies🍭 and communicate with various gurus