Have a peek at the github flavored markdown examples (link) . So if you want to use inline block in your blog post, you need to convert a pair of ` (accent grave or backtip) to <code> </code> (explanatiions on the <code> tag is here.
the picture on the left is change to `inline code`.
Now we need two things. First, a javascript to detect the `backtip` and convert to `<code> </code>` html tag pairs. Second, a css style for the inline code block.
1. Javascript
The javascript is quite simple. There is already a korean post on this issue, but somehow it wasn't working for me. So I tried to make my own. The code is such as bellow
<html>
<!-- ... >
<body>
<!-- ... >
</body>
<!-- paste this code block right above '/html' tag>
<!-- Inline code block Script -->
<script>
var str = $("div.article-view").html();
str = str.replace(/`(.*?)`/g, '<code>$1</code>');
$("div.article-view").html(str);
</script>
<!-- end of Inline code block Script -->
</html>2. CSS
I refered to this github styled mardown css link. And added them to my css.
.article-view img {
max-width: 100%;
}
/*paste this code block to your css*/
/*inline-code*/
.article-view p > code {
padding: .2em .4em;
margin: 0;
font-size: 85%;
background-color: rgba(27,31,35,.05);
border-radius: 3px;
}
.another_category {
display: none;
}You can try other inline code block styles. If you want. If there is any one trying out a new one please leave a comment on which ones you would like to use.
'Misc > Blogging Tips' 카테고리의 다른 글
| [TIPS] How to use Katex in Tistory blogs(티스토리에서 Latex 사용하기) (1) | 2020.10.03 |
|---|---|
| [TIPS] How to add your Tistory Blog to Google Search Console (0) | 2020.10.01 |