Notes on Blog Writing: A Collection of Tips

Write ur blog post watching real-time changes

Type this code, into ur terminal and access to localhost. lalala

Every time u save the code using Ctrl+s U can see the changes

Codeblock

Github Gist

In this website, type the code u want, and embed it.

Details button : hide the solution

<details>
  <summary>Click for the solution!</summary>
  
  <div markdown="1">

  You can type the solution here.
  
  $$ f(x) = \int_{0}^{\infty} e^{-x} dx $$

  </div>
</details>

Click for the solution!

You can type the solution here.

\[f(x) = \int_{0}^{\infty} e^{-x} dx\]

For customize the button, you need to add the code below in main.scss in assets/css directory.

/* details styling */
details {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  margin-bottom: 1em;
}

details summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.5em;
  margin: -0.5em -0.5em 0;
  background-color: #f6f8fa; 
  border-radius: 4px;
  list-style: none; /* hide default arrow */
}

/* hover */
details summary:hover {
  background-color: #eef1f4;
}


details[open] {
  padding: 0.5em;
}


details summary::-webkit-details-marker {
  display: none;
}


details summary:after {
  content: "+"; 
  float: right;
  font-weight: bold;
}

details[open] summary:after {
  content: "-";
}