TailwindCSS Typography

[rohandebsarkar]

Added @tailwindcss/typography plugin to render markdown content only.

[netlify]

✅ Deploy Preview for academic-folio ready!

Name	Link
🔨 Latest commit	f18f81e
🔍 Latest deploy log	https://app.netlify.com/sites/academic-folio/deploys/63d62986099ee10008d7587b
😎 Deploy Preview	https://deploy-preview-53--academic-folio.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[rohandebsarkar]

Most of the features look good except the code blocks, for that I think we have to add another color for code background.

[rohandebsarkar]

@pourmand1376, can you confirm if all the markdown features are working correctly.

[pourmand1376]

Thanks for adding all these improvements. I agree that we should add another color for code-background.

I updated the blog post to also support the extended markdown format. You can check here for more information.

Here are some suggestions to make it better.

1- There is no clear distinction between Heading 5 and 6. Also Heading 1 is too big.

2- We should backticks when rendering inline code blocks. Also, the background-color should be different.

3- The definition list is not working properly.

4- Link Hover is not working. When we hover over a link, It should show something like this. Note the blue link icon.

5- Task list has lots of extra spaces.

6- Emojishort codes are not working.
7- We can have a copy icon for code-blocks like here.

[rohandebsarkar]

Thank you for taking the time to check all the markdown syntax. Also thank you for the suggestions, here are my replies:

1. Yes, h1 is too big but h1 is supposed to be used as the page header (like blog titles, etc) using it in the content may not be the proper use of it. And about h5 and h6 being the same, the explanation is given here https://github.com/tailwindlabs/tailwindcss-typography/blob/master/demo/components/MarkdownSample.mdx#we-havent-used-an-h4-yet, basically it says to give proper distinction we would have to reduce the size of these tags lower than the body text (which isn't ideal).
2. I previously made the decision of not using background color for inline codes, since it wasn't looking that great and had to add padding which messed with the line heights.
3. Regarding definition lists there is a open issue in their repository, Support for dl, dt and dd tags tailwindlabs/tailwindcss-typography#146 . We would have to investigate how to implement it (would be better if we could create an PR upstream).
4. This, I think have to be implemented separately.
5. It is more of a personal preference.
6. https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes, Hugo probably doesn't have any emoji shortcode, in that case have to added separately (will look into that later).
7. This is interesting, have to investigate weather it will be possible to implement natively with low JavaScript.

Many of these could depend on the personal choice of the users. I suggest to add another scss file for custom css which can be configured by the user as he/she wants.

[rohandebsarkar]

Hey @pourmand1376, I went ahead and fixed the h1 margin problems, task list margin problems, also added font weight to h5.

Could not do anything to h6, since that will cause it to look smaller than normal text.

Added a custom scss file for users to add their own custom styles so that there is no conflicts during updating.

Sorry, I think I misunderstood the emoji short code problem. This was a configuration problem, I enabled it.

[pourmand1376]

Thanks for the changes and explanation. I respect your personal preferences. In fact, I think they are very good. Now, It looks a lot better.

Just two minor recommendations:

• The code block doesn't have a good background. At least, it should be consistent across two code blocks.
  

• We should somehow remove this backtick. This "nano" should be rendered as nano (without backtick).
  

[rohandebsarkar]

I have removed the backticks from inline code blocks. Also made sure the code blocks are hilighted even if no language was provided (will fallback as .txt). Since the previous hilight theme (monokai) wasn't looking good I replaced it with Dracula which can be easily configured from config.