代码

代码是一种用于展示计算机程序的文本格式。

基本代码

  • Preview
  • Code
this code
this code
this code

<pre hx-ext="bny-code">
this code
this code
this code
</pre>

htmx-组件

json文件加载

  • Preview
  • Code
  • Json

                        

                    

                    

                        
<pre hx-ext="bny-code" hx-get="/test/data/code.json" hx-trigger="load"></pre>
            

                    

                    

                        
{
    "data": "hello world"
}
            

                    

                

            

            
html文件加载

            

                
    
                    
  • Preview
    • 
                    
  • Code
    • 
                

                

                    

                        

                            

                        

                    

                    

                        
<pre hx-ext="bny-code" hx-get="/test/data/code.html" hx-trigger="load"></pre>
            

                    

                

            

            
结合highlight.js\Prism.js 
2.0.2+

            

                
    
                    
  • Preview
    • 
                    
  • Code
    • 
                

                

                    

                        

                            

                        

                        

                            

                        

                        

                            
$code = 'this code';
echo $code;
                            

                        

                    

                    

                        
                            
<pre hx-ext="bny-code" hx-get="/test/data/code.html" hx-trigger="load" mode="highlight" lang="php"></pre>
<pre hx-ext="bny-code" hx-get="/test/data/code.html" hx-trigger="load" mode="prismjs" lang="php"></pre>
<pre hx-ext="bny-code" mode="prismjs" lang="php">
$code = 'this code';
echo $code;
</pre>
            

                    

                

            


            
API

            
HTMX 扩展

            

                
                    
属性说明

                
                
                    
hx-ext="bny-code"激活代码块组件：自动高亮 + 复制按钮

                
            

            
CSS 类

            

                
                    
类名说明

                
                
                    
[hx-ext~="bny-code"]代码块容器，背景色 + 内边距

                    
.copy-btn复制按钮，hover 时出现

                    
code内联代码标签，浅灰背景 + 红色文字