How this blog is build

-

Content

  • Intro 111
  • Customise Theme
  • Support syntax highlight with highlighjs
  • Customise CSS

I write this blog to learn and share

The best way to learn is notes and share. So I write this blog to do that;
I’ve tried to write blog on medium but found it quite difficult and don’t have what I need:
  • customizable
  • be able to backup
  • support markdown
After investigate several blog platforms, I choose blogger:
=> cusmtomizable: under the hood, it’s just html & css; so I can do whatever I want
=> be able to backup: I compose & edit my blog post on a markdown editor, than convert it to html & post to blogpost; So I can keep all of my data
you can check StackEdit to edit in markdown and publish to blogger
=> support markdown: I found it’s easier if I use markdown to write blog. It’s have almost every format I need

Choosing theme

You can go to Theme -> Customise to choose the theme you want
I found that simple theme is good enough for me :>

Support code style highlight

1. I used highlight.js to support syntax highlight;
It’s easy to config. You just click to get version ... and will go to this page: highlight.js
highlightjs-setup
2. Download highligh.js and put the file on your google drive (or any host)
highlight.js
default.css (you can choose any theme in highlightjs download package and replace the content of default.css)
3. Go to Theme -> Edit HTML; add highligh.js loading script in <head>
highlighjs-config

Custom CSS

1. Go to Theme -> Customise:
custom_step_1
2. Go to Advanced -> Css
custom_step_2
In here I added underline for hyperlink and changing some font-size for header
I also custom the quoteblock a little bit
Here is the full of custom css
.post-body > a {
    text-decoration: underline;
}

.post-snippet *> a {
    text-decoration: underline;
}

.post {
  font-size: 20px;
}

.post > h1 {
   font-size: 36px;
}

.post > h2 {
   font-size: 32px;
}

.post > h3 {
   font-size: 28px;
}

.post-body > h1 {
   font-size: 2.2em;
}

.post-body > h2 {
   font-size: 1.8em;
}

.post-body > h3 {
   font-size: 1.4em;
}

code {
   font-size: 14px;
   font-family: monaco;
   line-height: 24px;
}

blockquote {
    width: 64%;
    position: relative;
    margin: 12px auto;
    padding: 10px 10px 10px 10px;
    font-family: "Inconsolata";
}
That’s done 😛
Hopefully it can help you something on building your own blog

Comments

  1. EkanshOctober 7, 2021 at 8:59 AM

    It's really a nice and helpful piece of information. Thank you for sharing this with us. React Native App Development

    ReplyDelete

Post a Comment

Popular posts from this blog

How to add custom media codec to pjsip

-
How to add custom media codec to pjsip Hi, in this post, I will show you how to add a custom codec to pjsip 2.2.1 Introduction: http://www.pjsip.org pjsip is a very strong and widely use in voip. you can combine pjsip with kamailio, stund, turn server, freeswitch to build chat application like Skype with many well feature like message, call, conversation.v.v. http://www.opus-codec.org opus is a lightweight media codec with very good quality but also cost minimum bandwidth (you can customize it bitrate yourself) to port opus codec you should choose a codec and follow it config (gsm for example) (This tutorial I read from http://www.piemontewireless.net/ , but now, this link is no longer exist) A little bit you need to know about pjsip build system (make file) pjsip use a set of make files to build, if you familiar with gnumake, it’s very easy to understand pjsip. but if you are not, here are some tips to help you easily maintain pjsip and solved bug when buid notice abou
Read more

Level up your log in React-Native with Reactotron

-
Image
A Log - Many Logs Log is the essential part of programming. If you ever worked with mobile programming or react-native, you will find that log is a the essential for monitor your app. In this post, I just want to a share a little bit trick to log in react-native app :) Console.log is bad!!! React-Native come with the default console.log to be able to see the log messages. You have to turn on Debug JS Remotely and open Inspector in chrome to view the message. This is bad because Debug mode is very slow. If you write a long message, it can crash your app The app continues warning about keeping chrome on foreground Reactotron come to rescue!!! https://github.com/infinitered/reactotron Yes!!! with reactotron, you DON’T NEED to turn-on Debug JS to be able to see log, and the log is also FASTER btw. The example below show how to configure Reactotron with redux for simulator and real device import Reactotron from 'reactotron-react-native'; import { reactotronRedux }
Read more