微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

csdn代码效果是怎么实现的？_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:25:12
原创
1243人浏览过

<html><head>    ...</head><body>    ...</body></html>
登录后复制
像这样的效果是怎么做到的，用了什么？


回复讨论(解决方案)

我想做整个的代码框功能 

登录后复制
 
 
  http://bbs.csdn.net/assets/sh-e7799bf9690a86571a685dd3015e559c.js  

 这个js实现的语法高亮 
 
  http://bbs.csdn.net/assets/sh-e7799bf9690a86571a685dd3015e559c.js  

 这个js实现的语法高亮 这代码好乱啊。。。。 
 
  压缩过了。。插件名称是SyntaxHighlighter，楼主找找这个插件的API看看 
 
  http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 
 
  http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html  
<pre class="brush: html;"><html>	<head>		...	</head>	<body>		...	</body></html>
登录后复制
这样写的效果就是空白和...，标签都成效果了，不以字符形式显示。我加了

后，结果这两个也显示出来了，让标签以字符形式显示出来呢？  
  要将替换为实体<> 
 
  要将替换为实体<> 那csdn是怎么做到我输入就显示的呢？ 
 
  楼主去了解下说明是html实体，csdn已经将替换为<>了，之中显示出来就是，要是源代码包含，就不会显示了 
 
  楼主去了解下说明是html实体，csdn已经将替换为<>了，之中显示出来就是，要是源代码包含，就不会显示了 哦哦，明白了。 
                

                    
大家都在看：

                    
                

                          
                

                            

                
            
                            

                    

                        
                            HTML速学教程(入门课程)
                        
                        

                            HTML速学教程(入门课程)
                            
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

                        

                    

                    
                        下载
                    
                

                
          
			
            

                
                                
来源：php中文网

                            



            

                
                                            
                        收藏
                                    

                
                                            
                        点赞
                                    
            




            

                                    
                        上一篇：关于iFrame内部表格宽度和高度_html/css_WEB-ITnose
                    
                                    
                        下一篇：求教一个翻页的问题_html/css_WEB-ITnose
                    
                            

            

                
                
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

            


                       
                        

                
最新问题

                

                                        

                        

                            在AMP页面中实现CSS动画：背景渐变效果的兼容性解决方案
                            本教程旨在解决在AMP（AcceleratedMobilePages）页面中CSS背景渐变动画无法正常显示的问题。不同于标准HTML中直接对body标签应用动画，AMP页面需要将动画样式应用于body内部的一个全高div元素。文章将详细阐述这一兼容性解决方案，并提供示例代码，帮助开发者在AMP环境中成功实现流畅的CSS动画效果。
                            

                                

                                    2025-11-15 11:57:05
                                

                                

                                    346
                                

                            

                        

                    

                    
                    

                                        

                        

                            使用Python Selenium从网页文本中精确提取特定信息
                            本文详细介绍了如何利用Python和Selenium库在网页上定位包含特定文本的元素，并从中提取冒号后方的精确信息。教程涵盖了XPath定位策略、元素文本获取方法以及Python字符串处理技术，旨在帮助开发者高效地自动化网页数据提取任务，并提供了完整的代码示例和实践建议。
                            

                                

                                    2025-11-15 11:55:55
                                

                                

                                    905
                                

                            

                        

                    

                    
                    

                                        

                        

                            构建可搜索的动态表格：JavaScript与API数据过滤教程
                            本教程将指导您如何利用JavaScript实现一个动态数据表格的搜索功能。通过从API获取数据并将其存储在全局变量中，我们能够结合用户输入，使用数组的filter()方法高效地筛选出匹配项，并实时更新HTML表格，从而为用户提供一个响应式且高效的数据查询体验。
                            

                                

                                    2025-11-15 11:55:36
                                

                                

                                    126
                                

                            

                        

                    

                    
                    

                                        

                        

                            CSS布局：实现图片居中且两侧环绕文本的现代指南
                            本教程旨在解决CSS中图片居中且两侧环绕文本的布局难题。我们将澄清float:center并非有效属性的误区，并探讨传统浮动布局的局限性。重点将放在推荐使用CSSFlexbox这一现代布局方案，通过详细的代码示例和解释，指导开发者如何高效、灵活地实现此复杂布局，确保内容结构清晰且响应式良好。
                            

                                

                                    2025-11-15 11:55:01
                                

                                

                                    964
                                

                            

                        

                    

                    
                    

                                        

                        

                            CSS Flexbox实现同div内两列内容的水平对齐
                            本教程详细介绍了如何利用CSSFlexbox布局在同一HTMLdiv元素内实现两列内容的水平对齐。通过设置父容器为Flex容器，并合理配置子项的对齐方式，可以轻松解决传统浮动布局中遇到的列无法水平并排的问题，从而创建响应式且结构清晰的页面布局。
                            

                                

                                    2025-11-15 11:54:02
                                

                                

                                    861
                                

                            

                        

                    

                    
                    

                                        

                        

                            使用CSS伪元素和数据属性创建动态通知角标：解决层叠与定位问题
                            本教程深入探讨了如何利用CSS伪元素::after和HTMLdata-*属性，为交互元素创建动态且定位精准的通知角标。文章详细阐述了将伪元素直接关联到父级元素的重要性，并结合position:absolute、top、right及transform属性，实现角标在元素右上角的灵活定位和正确层叠显示，同时支持通过数据属性动态更新内容。
                            

                                

                                    2025-11-15 11:52:34
                                

                                

                                    862
                                

                            

                        

                    

                    
                    

                                        

                        

                            精确控制滚动事件中的元素可见性：解决条件判断逻辑错误
                            本文旨在解决JavaScript/jQuery中基于滚动位置控制元素显示/隐藏时常见的逻辑错误。通过分析if/elseif语句的执行机制，我们将阐明为何简单的叠加条件会导致预期外的行为，并提供一种利用明确的滚动范围来精确控制元素状态的解决方案，确保在不同滚动区间内元素能按需正确地显示或隐藏。
                            

                                

                                    2025-11-15 11:48:02
                                

                                

                                    174
                                

                            

                        

                    

                    
                    

                                        

                        

                            JavaScript前端开发：解决动态生成卡片详情全部展开的精确控制策略
                            在构建基于API数据的动态卡片列表时，点击“查看详情”按钮却意外导致所有详情卡片同时展开是一个常见的前端交互问题。本教程旨在深入分析此问题的根源——全局DOM查询的误用，并提供一个高效且精确的解决方案：通过利用JavaScript事件对象的e.target属性，将DOM查询范围限定在触发事件的特定元素内部，从而实现对单个详情内容的精准显示与隐藏控制。
                            

                                

                                    2025-11-15 11:45:48
                                

                                

                                    351
                                

                            

                        

                    

                    
                    

                                        

                        

                            JavaScript控制局部滚动：阻止锚点链接影响主页面滚动
                            本文旨在解决点击局部容器内的锚点链接时，主页面滚动条意外滚动的问题。通过JavaScript拦截锚点链接的默认行为，并利用scrollTo方法精确控制目标容器的滚动位置，实现平滑且局部的滚动效果，从而优化用户体验，避免不必要的全局页面跳转。
                            

                                

                                    2025-11-15 11:42:21
                                

                                

                                    274
                                

                            

                        

                    

                    
                    

                                        

                        

                            Flexbox与JavaScript结合：构建自适应两列布局及视频等高堆叠教程
                            本教程详细介绍了如何利用Flexbox和JavaScript构建一个响应式两列布局。该布局包含一个视频和一个文本内容区域，旨在解决在不同屏幕尺寸下，特别是在小屏幕堆叠时，保持两列等宽等高以及视频内容正确缩放的挑战。通过结合CSS媒体查询实现基础响应式，并运用JavaScript的window.onresize和getComputedStyle方法，实现列尺寸的动态同步，确保布局的视觉一致性和内容的良好呈现。
                            

                                

                                    2025-11-15 11:42:02
                                

                                

                                    155
                                

                            

                        

                    

                    
                    

                                    

            

            

                

                    
相关专题

                    更多>
                    
                

                

                    
                

            



        

    

    

            

        
        
        

		        

            
热门推荐

            

                            
            

            
        

        

                    

		

                
开源免费商场系统广告

        		
		

        

            

                
热门教程

                更多>
                
            

            

                

                    
相关推荐 

                    
热门推荐

                    
最新课程

                

                
                
                
            

            
        

        

            

                
最新下载

                更多>
                
            

                        
            

                

                    
网站特效 

                    
网站源码

                    
网站素材

                    
前端模板

                

                
                
                
                
            

            
        

    







    

        

            

                

                    

                        关于我们
                        免责申明
                        举报中心
                        意见反馈
                        讲师合作
                        广告合作
                        
                        最新更新
                        English
                                                

                    

                    
php中文网：公益在线php培训，帮助PHP学习者快速成长！

                    

                      
                        关注服务号
                        
                      
                        
                        技术交流群
                        
                      
                        

                    

                

                
            

            

                

                    
                    

                        
PHP中文网订阅号

                        
每天精选资源文章推送

                    

                

                

                    
                    

                        
PHP中文网APP

                        
随时随地碎片化学习

                    

                

            

        

    

    

        
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

    







































    
  • 
        
    
            
    
                
                    
                    
    PHP学习
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    技术支持
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    返回顶部
    
                    
            
    
        
    
    
    •