Files
FixIt/apps/test/content/posts/codeblock-test.md
T
Cell 93478b47e1 refactor: code block wrapper (#665)
* feat: optimize code highlighting for diff language

* refactor: update codeblock configuration and enhance code wrapper functionality

* fix: extra blank lines would appear when copying lines containing code highlighting

* refactor: enhance code block wrapper functionality and add new styles (mac style)

* refactor: enhance code block normal mode

* feat: do noting for code block simple mode

* feat: add copy btn for code block modes mac and simple

* refactor: add code-related variables and update styles for code blocks and gist layout

* feat: update code copy button visibility on hover for larger screens

* feat: update code block mode attribute and remove mac wrapper

* feat!: code block parameters accurate to a single

Remove the `data-open` attribute and use `.open` instead.

* refactor: enhance initCopyCode method to accept optional button parameter

* feat: improve code/diagram copy button styles and transitions for better visibility

* fix: disable copy buttons for simple/mac mode code blocks when copyable set to false

* chore: rename normal partial to code-header

* feat: add preview and expand feature for code blocks (close #312)

* fix: adjust transition timing for code header and fade-out animation

* test: update code block test case

* docs: update comments for code highlight and markup configurations

* feat: adjust code header background color darkening for light and dark themes

* fix: hide aside and breadcrumb pseudo-elements on small screens

* perf: change the code copy button and code expand button to server-side rendering

* fix: the code expand button obscured the code content

* fix: update code background and header colors for improved visibility

* fix: ensure code copy button is only added for copyable code blocks

* feat(code block): add lineNosToggler and lineWrapToggler params and feature for code blocks

* refactor: code syntax highlighting styles

* fix: update background color for line numbers and ensure proper sticky effect

* feat(code block): add support for code file names in code blocks

* fix: code review for PR #665

* feat(i18n): add Japanese and Korean translations; update toggle options in multiple languages

* docs: update configurations and comments
2025-12-17 16:56:52 +08:00

4.5 KiB

title, date, collections, categories, tags
title date collections categories tags
Code Block Test 2025-11-28T15:16:35+08:00
Tests
Markdown
Code Block

Testing code block in FixIt theme.

🎉🥚 in development mode!

Multiple modes

// Classic mode
function add(a, b) {
  return a + b
}
// Mac mode
function add(a, b) {
  return a + b
}
// Simple mode
function add(a, b) {
  return a + b
}

Code title

(r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
+"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?'#FF0':"#444"))c=x/2
%4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
D=Date()[16+(x/8|0)])?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y},100))()

Code File Name

function hello(x = 'world') {
  console.log(`Hello, ${x}!`)
}

hello()
// Hello, world!
hello('FixIt')
// Hello, FixIt!

Collapsed/Expanded

eval(z = 'p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//
```lang {.is-collapsed}
// This code block will be collapsed by default.
```
```lang {.is-expanded}
// This code block will be expanded regardless of its length.
```

No wrapper

Set wrapper=false to disable code wrapper.

function add(a, b) {
  return a + b
}
function add(a, b) {
  return a + b
}

lineNos=false

function add(a, b) {
  return a + b
}

lineNumbersInTable=false

Warning

Not recommended!

function add(a, b) {
  return a + b
}

Diff Code

- theme = "LoveIt"
+ theme = "FixIt"
! enhancements and fixes

Long Code

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

Highlighting

Highlighting in code fences is enabled by default.

/**
 * check if a string is a JS object string
 * @example isObjectLiteral("{a:1,b:2}") // true
 * @param {string} str string to check
 * @returns {boolean} whether the string is a JS object string
 */
function isObjectLiteral(str) {
  if (typeof str !== 'string') {
    return false
  }
  str = str.replace(/\s+/g, ' ').trim().replace(/;$/, '')
  if (str.startsWith('{') && str.endsWith('}')) {
    return true
  }
  return false
}

Highlighting in shortcode highlight.

{{< highlight javascript "hl_lines=2 8-10,linenostart=287" >}} /**

  • check if a string is a JS object string
  • @example isObjectLiteral("{a:1,b:2}") // true
  • @param {string} str string to check
  • @returns {boolean} whether the string is a JS object string */ function isObjectLiteral(str) { if (typeof str !== 'string') { return false } str = str.replace(/\s+/g, ' ').trim().replace(/;$/, '') if (str.startsWith('{') && str.endsWith('}')) { return true } return false } {{< /highlight >}}

Gist Embed

{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}}