add language indicator to code blocks

2026-06-05 19:15:30 -04:00 · 2025-05-07 20:01:12 -04:00
parent 6fd7c9fc4a
commit fff705f1e8
15 changed files with 90 additions and 59 deletions
@@ -24,7 +24,7 @@ Below are the code snippets you can grab and customize to make your own ["waving
 ## CSS

 {/* prettier-ignore */}
-```css lineNumbers
+```css showLineNumbers
 .wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
@@ -34,8 +34,7 @@ I've written a simple implementation below, which...
 <iframe
  src="https://jakejarvis.github.io/dark-mode-example/"
  title="Dark Mode Example"
-  className="border-ring w-full border-2"
-  style={{ height: "190px" }}
+  className="border-ring h-[190px] w-full border-2"
 ></iframe>

 A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example), or [open in a new window](https://jakejarvis.github.io/dark-mode-example/) if your browser is blocking the frame) and you can try it out on this site by clicking the 💡 lightbulb in the upper right corner of this page. You'll notice that the dark theme sticks when refreshing this page, navigating between other pages, or if you were to return to this example weeks from now.
@@ -46,7 +45,7 @@ A _very_ barebones example is embedded above ([view the source here](https://git

 I have cleaned up this code a bit, added a few features, and packaged it as an [📦 NPM module](https://www.npmjs.com/package/dark-mode-switcheroo) (zero dependencies and still [only ~500 bytes](https://bundlephobia.com/package/dark-mode-switcheroo) minified and gzipped!). Here's a small snippet of the updated method for the browser (pulling the module from [UNPKG](https://unpkg.com/browse/dark-mode-switcheroo/)), but definitely [read the readme](https://github.com/jakejarvis/dark-mode#readme) for much more detail on the API.

-```html lineNumbers
+```html showLineNumbers
 <button class="dark-mode-toggle" style="visibility: hidden;">💡 Click to see the light... or not.</button>

 <script src="https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js"></script>
@@ -94,7 +93,7 @@ The [example HTML and CSS below](#html-css) is still helpful for reference.
 ### Full JS:

 {/* prettier-ignore */}
-```js lineNumbers
+```js showLineNumbers
 /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */

 (function () {
@@ -177,7 +176,7 @@ The [example HTML and CSS below](#html-css) is still helpful for reference.
 ### HTML & CSS Example:

 {/* prettier-ignore */}
-```html lineNumbers
+```html showLineNumbers
 <!doctype html>
 <html>
 <head>
@@ -102,7 +102,7 @@ I removed the company's name because an important part of responsible _disclosur

 The `poc-d4ca9e8ceb.html` proof-of-concept file contained this single, hidden line:

-```html lineNumbers
+```html showLineNumbers
 <!-- subdomain takeover POC by @jakejarvis on Bugcrowd -->
 ```

@@ -43,7 +43,7 @@ If you're bored on a rainy day, potential activities could include:

 Who cares if somebody wants to delete a post with the ID "`*`" no matter the author? ([delete_reply_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/delete_reply_submit.php#L9))

-```php lineNumbers
+```php showLineNumbers
 <?php
  $query2 = "DELETE FROM jbb_replies
 WHERE replyID ='$replyID'";
@@ -54,7 +54,7 @@ $result2 = mysql_query ($query2)

 Sessions based on storing an auto-incremented user ID in a cookie. ([login_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/login_submit.php#L28))

-```php lineNumbers
+```php showLineNumbers
 <?php
 session_id($user->userID);
 session_start();
@@ -66,7 +66,7 @@ $_SESSION["ck_groupID"] = $user->groupID;

 Viewing a "private" message based solely on a sequential message ID. ([pm_view.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/pm_view.php#L13))

-```php lineNumbers
+```php showLineNumbers
 <?php
 $query1 = "SELECT * FROM jbb_pm WHERE pmID = '$pmID'";
 ?>
@@ -74,7 +74,7 @@ $query1 = "SELECT * FROM jbb_pm WHERE pmID = '$pmID'";

 Incredibly ambitious emoticon and [BBCode](https://en.wikipedia.org/wiki/BBCode) support. I honestly can't begin to explain this logic. ([functions.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/functions.php#L18))

-```php lineNumbers
+```php showLineNumbers
 <?php
 $replacement = '<img src=images/emoticons/smile.gif>';
 $replacement2 = '<img src=images/emoticons/bigsmile.gif>';
@@ -111,7 +111,7 @@ $topicval = str_replace('

 Saving new passwords as plaintext — probably the least problematic problem. ([register_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/register_submit.php#L10))

-```php lineNumbers
+```php showLineNumbers
 <?php
 $query = "INSERT INTO jbb_users (username, password, email, avatar) VALUES ('$username','$password','$email','images/avatars/noavatar.gif')";
 ?>
@@ -119,7 +119,7 @@ $query = "INSERT INTO jbb_users (username, password, email, avatar) VALUES ('$us

 I guess I gave up on counting `$query`s by ones... ([functions.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/functions.php#L231))

-```php lineNumbers
+```php showLineNumbers
 <?php
 while ($topic = mysql_fetch_object($result30)) {
    $query40 = "SELECT * FROM jbb_users WHERE userID = '$topic->userID'";
@@ -28,7 +28,7 @@ If you run your own server, these can be added by way of your Apache or nginx co

 The following script can be added as a Worker and customized to your needs. Some can be extremely picky with syntax, so be sure to [read the documentation](https://www.netsparker.com/whitepaper-http-security-headers/) carefully. You can fiddle with it in [the playground](https://cloudflareworkers.com/), too. Simply modify the current headers to your needs, or add new ones to the `newHeaders` or `removeHeaders` arrays.

-```js lineNumbers
+```js showLineNumbers
 let addHeaders = {
  "Content-Security-Policy": "default-src 'self'; upgrade-insecure-requests",
  "Strict-Transport-Security": "max-age=1000",