Automatically translated.View original post

59. Turn on / off syntax highlighting of the code!

2024/11/10 Edited to

... Read moreこの記事ではPrism.jsを用いたシンタックスハイライトの実装例が紹介されていますが、さらに実用的に使いこなすためのポイントを共有します。 まず、シンタックスハイライトはコードの可読性を格段に上げるため、実務でのコードレビューや学習効率化に役立ちます。私も初めて使ったときは単純な色づけだけかと思いきや、コードの構造を視覚的に理解しやすくなり、デバッグ時間が短縮しました。 次に、今回のサンプルのように、オン・オフの切り替え機能をつけることで、ユーザーや閲覧者のニーズに合わせて表示を調整できる点が大きなメリットです。たとえば、初学者向けにはハイライトありで視覚的に把握しやすくし、上級者向けにはシンプルにコードだけをじっくり読みたい場合の選択肢を提供できます。 さらに、Prism.jsはプラグインも豊富なので、行番号の表示やコピー機能の追加も可能です。こうした拡張性を活かして、自分のウェブサイトやポートフォリオにも簡単に適用できるため、転職活動時のアピール材料としても活用できると思います。 実装時の注意点として、ハイライト切り替えのJavaScript部分はイベントを正しく扱い、ページの負荷を最小限に抑える形で設計することが大切です。また、レスポンシブ対応も意識すると、スマートフォンからの閲覧時にも見やすさを維持できます。 最後に、HTML・CSS・JavaScript初心者でも実際に手を動かしながら学べるよう、サンプルコードを少しずつ改変してみるのがおすすめです。私も繰り返し動作を確認しながら不具合を潰し、理解が深まりました。このようにPrism.jsを使ったシンタックスハイライトのオン・オフ機能は、実用性と学習効果の両面で非常に価値がある機能です。ぜひ参考にしてみてください。

Related posts

A pink iPhone lock screen displays the time 23:53 and the name 'Rimsle' below it, with heart icons. Text overlays introduce the topic: 'How to add your name on the lockscreen'.
Two pink iPhone lock screens show different custom texts: 'Jessica' and 'Claude Monet' below the time. An overlay explains, 'you can add any text as you like such as someone's name, a quote, etc.'.
The top image shows the iPhone App Library with the 'iScreen' app highlighted. The bottom image shows the iScreen app's search bar with 'Girlvibe01' entered, guiding the user to the app and code.
Add your name above the screen✨🌸Sweet Tips
☁️Hey loves! Hope your day's been going well~ I've been playing around with ways to make my lock screen feel more personal, and I found the cutest little trick I had to share with you You can actually add your name, your fav word, or even your special someone's name right above the
Screen Tips&Redecoration🖤

Screen Tips&Redecoration🖤

2529 likes

The image displays Python multiple-choice questions and answers for a WGU D522 exam, covering the `map()` function's purpose, data type conversion between float and int, and reading file contents into a string.
The image presents Python multiple-choice questions and answers on retrieving function documentation, the `map()` function's action, code editor features, the `min()` function, string slicing, defining code blocks, Python scope, and variable characteristics.
PYTHON FOR IT AUTOMATION (WGU D522) EXAM 2025/2026
Lemon367443437826

Lemon367443437826

1 like

✨💻 The BEST Hex Codes For Pretty Digital Notes 👩🏾‍💻✨
✨Let’s be real, studying is hard enough. But when your digital notes look good? Suddenly, reviewing for that exam hits different. 😌 Whether you’re on Goodnotes, Notability, OneNote, or even just Google Docs, these aesthetic hex code combos will take your notes from “meh” to chef’s kiss. 💅✨ 🌸 Pas
Margarita

Margarita

227 likes

PSA 30% off @White Fox Boutique using my code TTLEAHS. Get in quick. Valid until June 30th 6:59am PDT #viralvideo #fypツ #foryoupage #body #viral
Leah Suarez

Leah Suarez

3 likes

A title slide for 'iPhone tricks You didn't know about Part 3' with three iPhones displaying different home screen themes, and a 'SWIPE' indicator.
Instructions on how to check if an iPhone charger is slow or fast, showing screenshots of the Settings > Battery menu and a battery graph indicating 'Slow Charger' in yellow.
A guide on sharing Wi-Fi passwords using a QR code, featuring the Passwords app icon and screenshots showing how to access the 'Show Network QR Code' option.
✨iPhone tricks you didn’t know about part 3
Hey friend, here’s part 3 of iphone tricks you didn’t know about. let me know which one you found useful below! Since most people have downloaded ios 18, this post includes mainly ios18 features that are underrated but 🔥 ⭐️Check how fast is your charger: - plug in your phone - go to setti
Byaombe •••

Byaombe •••

12.8K likes

CPT STEPS
Anyone taking the medical billing and coding class ? HERE STEAL MY NOTES 🫶🏾 THEY ARE HERE FOR YOU WHEN STUDYING FOR THE EXAM 👏🏾 #medicalcodingstudent #medicalstudent #studynotes #cheatsheet #letschat
Shanel red

Shanel red

102 likes

A color-coded Bible index categorizes books into sections like Law, History, Poetry, Prophets, Gospels, History of Church, Letters, and Prophecy. Each book is listed with its corresponding page number, using different colors to visually distinguish the categories.
Bible reference
#biblecolorcode #Bible #Godsword #Jesus #Christian
IMPACT

IMPACT

952 likes

A vibrant graphic titled "CUTE CANVA CODES FOR THE GIRLS" featuring various pastel-colored cute elements like buttons, hearts, a bow, and a paperclip, set against a blurred background of stickers on a device.
A collection of cute, hand-drawn bows in various pastel colors and styles, with the text "Cute Bows set:nAF94beN3sc" displayed on a yellow banner.
An assortment of adorable, pastel-colored buttons in different shapes like flowers, a cat, a star, a bear, a heart, and squares, labeled "Little Buttons set:nAGafR9Fw7E."
🌟 These Canva Elements Will Level Up Your Designs!
💌 I’ve loved sharing Canva element codes with you all lately! Here are 8 more code sets for you to use to add some adorable flair to your projects. My favorites are the buttons and the kawaii decor! #canvahack #canvatutorial #canvatips #canvaediting #cute
Ad 💌🌈🐀🛼🎨

Ad 💌🌈🐀🛼🎨

18.7K likes

Turn this off in SnapChat!
Snapchat has been using AI even if you aren’t using the AI bot thing… turn this off in your profile settings so they don’t use your pictures and snaps: 1) go to profile 2) go to settings 3) scroll down to “Generative AI Settings” under “My Privacy & Data” 4) toggle off “allow use of public
Just Duck

Just Duck

2869 likes

💉What Does The Blood Collection Color Top Mean?
If you’re in the medical friend and have to draw blood 🩸 The color of the top of a blood collection tube indicates the type of additive inside the tube, which determines the tube’s specific use in laboratory testing. Here is a list of common blood draw tube tops and their meanings: 🔴 Red
Forever Kiana

Forever Kiana

1054 likes

Knights Code
TemparLegacyCrossAndSword

TemparLegacyCrossAndSword

6 likes

A customized iOS Control Center featuring pink butterfly and bow icons, a music player for 'Watermelon' by John + Jane Q. Public, and 'Do Not Disturb On'. The image asks 'How to get your CONTROL CENTER To look like this'.
The Mico app icon, featuring overlapping dark, teal, and light green squares, with the text 'this is the app I use' positioned above it.
A screenshot of the Mico app interface, highlighting the 'Control Center' option with a blue arrow and 'click this'. It also displays various battery widget recommendations like '3D Emoji Battery' and 'Panda Battery'.
Control center
App-mico Rate-9.5/10 Not the best, but not the worst!!
.˚𓏲♱ gabz/cyrus ☆ 🦇

.˚𓏲♱ gabz/cyrus ☆ 🦇

263 likes

An infographic illustrates HTTP status codes, categorizing them into Success (2xx), Redirection (3xx), Client Error (4xx), and Server Error (5xx). It shows client-server interactions and lists common codes for each category, created by Dan Nanni.
Different types of HTTP status code
If you work in DevOps or web app pentesting, understanding HTTP status codes is a must Here is a quick breakdown of what each code means and when it appears in real-world scenarios 😎👆 #web #frontend #softwaredeveloper Find high-res pdf books with all my #networking and DevOps rela
Learn Linux with Dan

Learn Linux with Dan

6 likes

A title slide for a stenography lesson, displaying 'BASIC THEORY UNIT I - LESSON 4' and 'Practice Habit - words are your business' with a location pin and checkmark icon.
A steno keyboard diagram with a yellow circle highlighting P, W, H, R, A, O keys. A yellow arrow points to a table detailing finger placement and sounds for P, W, PW, and PH keys.
A handwritten note on paper, mostly obscured, asking 'Can you translate this into steno language?' and showing the sentence 'You bore me.' with a 'SWIPE FOR ANSWER' prompt.
Can You Crack the Steno Code? ⌨️🕵️‍♀️
Think you can read shorthand? Swipe to test your skills! ⬅️ I’m officially on Lesson 4 of my stenography journey, and the keyboard is starting to look like a puzzle. This week was all about: • The P and W keys • Learning that PW = B and PH = M (mind blown! 🤯) • Mixing in our vowels and the H, R
Alyssa💕

Alyssa💕

2 likes

A person holds a pink sanitary pad, with the title text "Period Blood Colors What They Mean?" in pink, red, and black, accompanied by three red blood drop icons.
A red square with text describes "Bright Red" blood as fresh blood seen at the beginning of a period or with a heavier flow, next to a red blood drop icon.
A light pink square with text describes "Dark Red/Brown" blood as older blood seen towards the end of periods, set against a blurred background of pink products.
Period Blood Colors: What They Mean?🩸
I know as women we have these questions and concerns. We all want to know to what the color of our period means and if we should worry. These are the different colors of blood during your period and when should you contact your primary care doctor. 🩸Bright Blood: Fresh blood that has recently left
CozyGirlMama 😎

CozyGirlMama 😎

611 likes

The image shows an open ICD-10-CM coding book with alphabetical tabs, illustrating how to find the code for endometriosis.
A hand points to the 'E' tab in the ICD-10-CM book, demonstrating the first step to locate a code in the index.
The image displays the ICD-10-CM Index to Diseases and Injuries, highlighting the 'Encounter - Endometriosis' section to find the relevant term.
ICD -10-CM Coding Practice
Medical coders use the ICD-10-CM book to find diagnosis codes. There are thousands of different codes. There are many rules and guidelines that a coder needs to understand :) The examples that I post are for people to just learn and see the basics. If you want to become a medical coder, my next
midnightcoding

midnightcoding

508 likes

An iPad screen in dark mode displays the FREENOTES app with a highlighter tool menu open. It shows settings for stability, thickness, and concentration, alongside a color palette featuring various pastel hex codes like A8B7DA and F9F7E2, suitable for digital notes.
Dark Mode Highlighter Hex Code you'll like 🖤🖤🖤
#hexcode #hexcodes #ipadnotes #highlighters #digitalnotes
Freenotes

Freenotes

1 like

A laptop displaying code, a coffee drink, and a pink notebook on a desk, with a city view in the background. The image is titled 'LEARNING TO CODE Tips from a PhD student'.
A pink notebook with handwritten 'Code outline' notes, a pen, a coffee drink, and a donut. The text overlay emphasizes outlining ideas on paper before coding.
A laptop screen showing the Stack Overflow website with a C++ programming question. The text overlay suggests using the website as a resource for coding problems.
tips for learning to code 🩷
As promised, here is part 2 for coding tips. Most of what I learned coding was self taught, so it is definitely possible to do, just take a bot to get in the swing of things!! Making an outline is a must. Especially for longer projects, or anything that builds. This is the best way to keep thing
Sarah :)

Sarah :)

612 likes

✨SCHOOL TIPS!✨
tips for ✨next school year!✨🤩💖✏️💕 #tipsforschool #school #schooladvice #girlytips #girlssupportinggirls
bella rosa

bella rosa

13K likes

I keep seeing people pay ElevenLabs a monthly fee for something this repo just does for free on your own machine. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

Scope Guides in Xcode 26
This is how we use scope guides in Xcode 26 #xcode #swiftui #afrotech #claudeai #iosdeveloper
Nerdy Yawdie

Nerdy Yawdie

0 likes

How to get Code Robux new method
#robloxgames #robloxgameideas #robux #summerbod #fyp
robloxFans

robloxFans

131 likes

The ONLY place to shop @White Fox Boutique use my code TTLEAHS for 30% off on @whitefoxboutique. Valid until June 30th 6:59am PDT #viralvideo #fypツ #body #viral #tiktokblowthisup
Leah Suarez

Leah Suarez

2 likes

A hand holds a pink iPad displaying the text "My Favorite Hex codes" in a playful font, framed by decorative white and pink outlines.
A grid of color swatches with their corresponding hex codes, featuring light and muted pastel tones suitable for aesthetic notes.
A collection of color swatches with hex codes, showcasing a range of muted, earthy, and slightly darker tones for note-taking.
Best Way to Take Aesthetic Notes 🫶✨🌸
Add some flair to your notes by using hex codes for a stylish and aesthetic touch! 🎨✨ #HexCodeMagic #AestheticNotes
Freenotes

Freenotes

48 likes

free hex code palettes 🎨
here are some free hex code palettes I made! you can use them for digital note-taking, illustrations, designing mood boards, creating social posts, or even customizing your digital planner ✨ the colors are super versatile so you can get creative in so many ways. I hope these palettes suit your styl
studiocherii

studiocherii

96 likes

An iPad displays digital notes on a dark background, with the text "Goodnotes Hex Codes for dark backgrounds" overlaid. A pink light source and a glass are in the blurred background, creating a soft aesthetic.
A grid presents various pastel and vibrant color swatches, each represented by a wavy line and its corresponding hex code, designed for use on dark backgrounds.
A grid displays circular color swatches with hex codes, featuring muted and earthy tones suitable for dark digital note backgrounds.
✔️Goodnotes Hex Codes (for dark backgrounds)🖤
🌙 Looking for the perfect hex codes for your GoodNotes pens and highlighters? These aesthetic, cute colors are ideal for dark note backgrounds, making your digital notes pop! 🖋️ Pen Colors: Embrace a palette that stands out against dark backgrounds. Opt for lighter, vibrant tones that maintain r
CompSkyy

CompSkyy

172 likes

LEVEL UP
#linux #technology #cybersecurity #code
Luna Bright

Luna Bright

4 likes

An iPhone Control Center with pink-themed, customized icons and widgets, demonstrating the desired aesthetic for a personalized control center.
An iPhone home screen showing the iScreen app icon, with text instructing the user to download iScreen for obtaining widgets.
The iScreen app interface, highlighting the 'Control Center' section and emphasizing the requirement for the iOS 18 update.
This is how you customize your control center! 🍡
This is how you get widgets on your control center and how to make it look cute! 1: download iScreen 2: go to the control center section! (Have IOS 18 update!!!!!) 3: customize them! 4: add to control center using the plus at the top when you hold it! 5: enjoy!! #phone #phonesettings
SillyX3

SillyX3

1389 likes

A hand holds a broken shimmery eyeshadow pan with 'Colorful metal effect' and 'Sephora' visible, against a speckled countertop. Text overlay reads 'How to Fix a broken Eyeshadow'.
A single, broken shimmery eyeshadow in its open compact sits on a speckled countertop. The caption states, 'This single eyeshadow was a broken mess! So let's fix it!'
An eyeshadow brush is used to gently tap and break up large clumps of the broken shimmery eyeshadow in its open compact on a speckled countertop.
How to fix a broken eye shadow!
If you break a powder eyeshadow or blush, don’t throw it out! You can fix it! This eyeshadow came to me totally busted. But I got it in the Sephora sale, it was only $7, and I just didn’t want to make the trip to Sephora to exchange it. So I decided to fix it! You only need a few supplies
Lori

Lori

44 likes

The Code Beneath the Smoke
The room barely moves. Just the low hum of a backroom light and the slow rise of smoke curling around them like it knows their story. She sits close, not rushed, not claiming space; just fitting into it, like gravity chose him first and her second. His hand rests on her thigh, steady,
Angel Writes

Angel Writes

12 likes

Key color coding method
I trained my brain to focus on only one color per review session. One day I only looked at red, next day I review purples. It sticks better this way 📚📚📚 I used to reread the SAME page 5x, now I just follow the colors, my brain knows what to look for. I was drowning in unorganized notes. Everyt
VowArchive

VowArchive

94 likes

A person at a desk with a laptop, reaching up, with the text 'Fun app for learning Coding Codebay' and the Codebay app icon, promoting a Python learning app.
A mobile app screen showing a Python lecture using a Terminator story scenario to teach the 'print' function, demonstrating interactive, story-based learning with a prompt to ask questions.
Mobile app screens displaying a coding exercise to debug Python code and a multiple-choice quiz, illustrating how the app includes quizzes and coding exercises for learning and assessment.
my favorite app for learning python 🫶
Plenty of people enjoy picking up a new language as a hobby, like Spanish or French... So, why not give learning a programming language a whirl? It could prove useful for work and also flex those computational thinking muscles. I stumbled upon this really interesting app. It's geared toward Pyt
Aura✨

Aura✨

528 likes

American Museum of Natural History #tiktokgonewyork #getyourguide @GetYourGuide #museumtok #museums #history Discounts when booked Through TikTok are Applied at purchase - So you can save 💰 now And redeem later This sale is for a limited time, Subject to change, and can en
Lyndsie

Lyndsie

0 likes

Every time I shop online, Coupert automatically finds coupons AND gives me cash back. Literally free money while I scroll 🛍️💸 Don’t shop without it. #CouponQueen #CashBackLife #SaveWhileYouShop #DealFinder #SmartShopping
MariClare MacLamroc

MariClare MacLamroc

49 likes

Stalker Tailgates Unmarked Police Car, Doesn’t End Well #cops #bodycam
Cops Blue💫🤣💫

Cops Blue💫🤣💫

0 likes

#greenscreensticker finally done with all the Bs. #womeninprison #prisontiktok #prison #prisonstorytimes
Kaitlyn 🎀

Kaitlyn 🎀

46 likes

rohitg00/ai-engineering-from-scratch - Learn it. Build it. Ship it for others. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

Study cheat codes nobody tells you
I’m actually taking my academic comeback seriously this time #studylifestyle #glowups #glowuptips #studyvibes
The Her Era

The Her Era

238 likes

A tablet displays the author's Substack page, featuring articles like 'Media Law for the Real World' and 'Ditching the identity by default,' with 'ameliametz.com' visible. The image illustrates the author's Substack writing process and why they started one.
The text defines Substack as an online platform for publishing newsletters, notes, essays, video, or audio, where readers can subscribe. A hand holding a quill pen is depicted at the bottom right, symbolizing writing.
The text explains how the author uses Substack by connecting it to their domain (ameliametz.com) as a home base for personal branding and a writing portfolio. A keyboard is shown at the bottom, representing writing tools.
my substack writing process & why i started one
Here’s how I use Substack to build my personal brand, practice long-form writing, and create a portfolio I’m genuinely proud of. If you’ve been wanting to start a newsletter, this is your sign ✨ #writer #substack #personalbranding #website #contentcreation
Milly

Milly

98 likes

Chapter 1 :ICD-10-CM Guidelines
📘 ICD-10 Guidelines Summary (with color highlights & examples) 🚨if you need more information on highlights please see prior post🚨 🟩 I.C.1.A.1 — Code Only Confirmed HIV Cases (Inpatient Exception) 🟩 Recommendation Highlight: Green** This guideline says that HIV should be coded only when it
Melea King

Melea King

132 likes

A close-up of an iPhone Control Center with a pink aesthetic. It features customized icons like a heart, bow, and cat paw, with text overlay "How to customize your control center iOS 18".
A customized iPhone Control Center displaying pink-themed icons, a music player widget for "Pink Champagne Nick Lopez", and a widget with a pink cat paw and "Kitty".
An iPhone home screen showing a pink and dark aesthetic. It features customized app icons for Photos, Instagram, TikTok, and widgets for date, battery percentage, and a pink orchid photo.
cute iPhone customization trick
"Swipe right to see the full cute iPhone customization trick 💅📱 #iPhoneAesthetic #PhoneSetup #CustomizationHack #TechStyle "
Lumi💖

Lumi💖

841 likes

A close-up of a person's face showing a visible sty on the lower eyelid of their left eye. The text overlay asks, "Hacks for getting rid of a sty?" with a Lemon8 logo and username.
Hacks for getting rid of a sty?
#eye #sty
MadamKimSavy

MadamKimSavy

6 likes

American Museum of Natural History #tiktokgonewyork #museum #museumtok #museummoment #getyourguide @GetYourGuide **sales mentioned in videos are live at the time of posting and are subject to change** You can book rooms Directly through the Location tag on this video
Lyndsie

Lyndsie

0 likes

Shortcut to Fix Alignment in Xcode Code
#xcode #swiftui #iosdeveloper #iosdevelopment #programming
Nerdy Yawdie

Nerdy Yawdie

0 likes

Super awesome discord server
#discord #discordcommunity #makefriends #ani me
✩Lawliet✩

✩Lawliet✩

33 likes

A title slide with the text "How I STUDY AND Color-code MY BIBLE" on a light green and grey background with olive leaves, indicating a guide to Bible annotation.
An open Bible with colorful annotations and highlighters, illustrating how the author's Bible looks on a good day, with text "My Bible Looks like this! (on a good day)".
A list detailing a color code for Bible annotation, assigning specific meanings like "Warnings/Sins" to Pink and "God's Character" to Light Blue.
How to color-code and annotate your Bible!
I hope this post inspires you to study God’s word and spend quality time with Him. Remember, do whatever works best to help YOU understand what you’re reading. Your Bible might not look like mine and your annotations won’t be “perfect”. I hope this helps you to create your own color key that works
christmysavior

christmysavior

4507 likes

Substacks of the week
Substack articles I read this week instead of doomscrolling!! #Lemon8Diary #coffee #coffeelover #substack #reading
tanner nicole

tanner nicole

9 likes

See more