feat: highlight code

[floyd-li]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

enable code highlight on blog post. support light and dark theme.

code syntax theme based on atom-one theme

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Syntax highlighting and dark mode for code blocks on blog markdown #6487
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖 Generated by Copilot at 60f740a

Added code highlighting feature for blog posts using highlight.js. Adjusted code block style to match page theme.

🤖 Generated by Copilot at 60f740a

In the dark of the night, we write our stories
With the power of code, we shape our glories
We unleash the light, we highlight our code blocks
We adapt to the fight, we change our syntax

[kodabot]

SUCCESS @floyd-li PR for issue #6487 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	c73d732
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64e01d0f1d58ff00087ea42c
😎 Deploy Preview	https://deploy-preview-6794--koda-canary.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 configuration.

[reviewpad]

AI-Generated Summary: This pull request includes a feature update to the BlogPost.vue component within the blog section. The main feature added is the code highlighting capability, making use of the 'highlight.js' library and appropriate CSS styles. The code updates include the addition of highlighting functions triggered on mounted stage of the component and styling for both light and dark modes for the highlighted syntax. Support for dynamic theme loading based on the page's theme is also added for better UX.

[floyd-li]

@exezbcz pls review this pr

[exezbcz]

@floyd-li Welcome back sir

Is it needed for it to have left-right padding? The block is not then aligned with the start of the content. Not sure if its done like this everywhere

• could you please make the font size in the code bloc 16px

[floyd-li]

Is it needed for it to have left-right padding?

could you please make the font size in the code bloc 16px

both done @exezbcz

[exezbcz]

something weird here
https://deploy-preview-6794--koda-canary.netlify.app/blog/first-time

By the way, is there any way to add copy code to each of them in the follow-up, or would it require more than I think?

works for me

[floyd-li]

something weird here https://deploy-preview-6794--koda-canary.netlify.app/blog/first-time

manually adjust the color of the inline code-block to match the code syntax theme

By the way, is there any way to add copy code to each of them in the follow-up, or would it require more than I think?

i think this feature need integration of clipboard.js, if you want it i may do it in another pr. wdyt?

cc @vikiival @yangwao

[codeclimate]

Code Climate has analyzed commit c73d732 and detected 0 issues on this pull request.

View more on Code Climate.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[exezbcz]

i think this feature need integration of clipboard.js, if you want it i may do it in another pr. wdyt?

I did follow up with p4, let's see if its demanded

nice job!

[vikiival]

4 mb package 🥲

[exezbcz]

@vikiival then its pass

[yangwao]

4 mb package 🥲

@floyd-li isn't there lighter package?

[floyd-li]

4 mb package 🥲

sorry but which package? i did not import any new package this pr 🤔️

[yangwao]

sorry but which package? i did not import any new package this pr 🤔️

ah I see we are already using it
https://github.com/kodadot/nft-gallery/blob/main/package.json#L100

@vikiival then whatever merge?

[vikiival]

Yup, proceed and merge

[yangwao]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.49 USD/DOT ~ 6.682 $DOT
🧗 13rv1SWoLg9Gb3tmvHPZxb7JbVy51BtMziX7k9WQGSJ7Kp3A
🔗 0xab1358d4fa0efa486149e1811374ea8e3ceb131c6c1da662da2b2654f2594597

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues