css控制的代码,通过CSS控制把网页上的代码美化

博客发布文章时,如果文章里有代码块的,通过pre或者code可以让代码块更好美观;有效提升阅读感受。它就像是IDE工具里的主题一样,看着眼睛舒服;

这个问题困扰了我很久,由于时间的问题,一直没解决。今天利用CSS代码把这些代码进行了一些简单的美化。效果好看多了。

以下是美化用到的CSS代码:

/* 代码高亮 */

pre{font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;

font-size:14px; width:92%; overflow:auto; margin:0 0 1em 0;

background:#423E3E;border-radius: 10px 10px; }

pre ol, pre ol li, pre ol li span{margin:0 0; padding:0; border:none}

pre a, pre a:hover{background:none; border:none; padding:0; margin:0}

pre ol{list-style:decimal; background:#423E3E; margin:0px 0px 1px 3em !important; padding:5px 0; color:#5C5C5C; border-left:2px solid #146B00;}

pre ol li{list-style:decimal-leading-zero; list-style-position:outside !important; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:1.3em}

pre ol li.alt{color:inherit}

pre ol li span{color:#E5E0E0; background-color:inherit}

pre .comment, pre .comments{color:#008200; background-color:inherit}

pre .string{color:blue; background-color:inherit}

pre .keyword{color:#069; font-weight:bold; background-color:inherit}

pre .preprocessor{color:gray; background-color:inherit}

pre .dp-xml .cdata{color:#ff1493}

pre .dp-xml .tag, pre .dp-xml .tag-name{color:#069; font-weight:bold}

pre .dp-xml .attribute{color:red}

pre .dp-xml .attribute-value{color:#1169AD}

pre .dp-sql .func{color:#ff1493}

pre .dp-sql .op{color:#808080}

pre .dp-rb .symbol{color:#a70}

pre .dp-rb .variable{color:#a70; font-weight:bold}

pre .dp-py .builtins{color:#ff1493}

pre .dp-py .magicmethods{color:#808080}

pre .dp-py .exceptions{color:brown}

pre .dp-py .types{color:brown; font-style:italic}

pre .dp-py .commonlibs{color:#8A2BE2; font-style:italic}

pre .dp-j .annotation{color:#646464}

pre .dp-j .number{color:#C00000}

pre .dp-delphi .number{color:blue}

pre .dp-delphi .directive{color:#008284}

pre .dp-delphi .vars{color:#000}

pre .dp-css .value{color:black}

pre .dp-css .important{color:red}

pre .dp-c .vars{color:#d00}

pre .dp-cpp .datatypes{color:#2E8B57; font-weight:bold}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566780.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

花瓣长度和花瓣宽度散点图鸢尾花_基于python的鸢尾花简单聚类模型分析

1、导入数据#导入花萼数据 from sklearn.datasets import load_iris irisload_iris() iris.data前四列为花萼长度,花萼宽度,花瓣长度,花瓣宽度等4个用于识别鸢尾花的属性2、建模#创建kmeans聚类 from sklearn.cluster import KMeans kmeansKM…

ajax结构图,Vuex结构图及用法

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex结构图下图是我总结的Vuex结构图。Vuex用法以一个Vue项目中的商家信息搜索功能为例,记录Vuex的使…

安卓设备门禁识别开发_基于android手机的视频通话门禁控制系统

龙源期刊网http://www.qikan.com.cn基于android手机的视频通话门禁控制系统作者:陆海李登辉来源:《科教导刊电子版》2017年第34期摘要如今门禁系统只能在固定的硬件设备进行对讲,智能化水平不高,且不能实现远距离操作,…

qq饥荒联机版服务器没有响应,饥荒联机版专用服务器卡顿原因及解决方法汇总...

饥荒联机版中自己的专用服务器会经常卡顿,那么是什么原因造成的呢?相信很多玩家都不太了解,下面带给大家的是饥荒联机版专用服务器卡顿原因汇总。饥荒联机版专用服务器卡顿原因汇总①猪人兔人鱼人房卡顿等级:高 解决难度:低普通服务器地上同屏可以放20个…

ajax php 返回数组并父子给变量,将字符串变量从PHP发送回数组变量的ajax ...?

我想将一条消息保存在PHP变量中,并用已返回的其他数组变量发回。例如,我在PHP代码中发生了一些错误检查,并想要一个字符串变量,并将特定的消息发送回我的javascript中使用。将字符串变量从PHP发送回数组变量的ajax ...&#xff1f…

类似endnote_求推荐一款文献管理软件?

科研路漫漫,勤勤恳恳查好了文献,辛辛苦苦做完了实验,磕磕绊绊写好了论文……这参考文献怎么回事,怎么插入进去就乱码,引用这些文献还得一个个改格式,中间插入新文献还要一个个调整顺序?这都不是…

服务器系统崩溃文件系统损坏,explorer启动崩溃,提示文件系统错误-2147219200

您好,了解到您在使用时遇到问题。请问您能否进入带网络的安全模式?您可以在锁屏界面长按Shift,同时点击电源-重启,进入WinRE界面,点击疑难解答-高级选项-启动设置-重启,然后按下F5进入带网络的安全模式。然…

react把表格渲染好ui_react 入坑笔记(五) - 条件渲染和列表渲染

条件渲染和列表渲染一、条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。贴一个小栗子:function UserGreeting(props) {return 欢迎回来!;}function GuestGreeting…

二进制除法移位相减_verilog移位相减实现除法(转载)

引言除法器在FPGA里怎么实现呢?当然不是让用“/”和“%”实现。在Verilog HDL语言中虽然有除的运算指令,但是除运算符中的除数必须是2的幂,因此无法实现除数为任意整数的除法,很大程度上限制了它的使用领域。并且多数综合工具对于…

python选课系统代码_python模拟选课系统

要求:角色:学校、学员、课程、讲师要求:1. 创建北京、上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. 课程包含,周期,价格,通过学校创建课程4. 通过学校创建班级&am…

php验证密码后跳转_php-laravel框架用户验证(Auth)模块解析(四)忘记密码

一、忘记密码模块路由二、控制器解析跟注册、登录的控制器一样,大部分的逻辑使用trait引入。ForgotPasswordController:负责忘记密码页面,以及邮件发送四、扩展开发:自定义的忘记密码行为忘记密码有多种处理方式,这里默…

flume数据丢失与重复_Flume监听文件到kafka,文件通道,kafka消费重复问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#me the components on this agenta1.sources r1a1.sinks k1a1.channels c1# Describe/configure the sourcea1.sources.r1.type execa1.sources.r1.command tail -F /usr/local/test1.txta1.sources.r1.fileHeader truea1.s…

MBSE系统工程是什么

MBSE(基于模型的系统工程)是现代系统工程的最新发展结果。 曾经的产品设计师利用纸笔绘制图版来制作产品和设计,在CAD这类三维建模软件的出现,让工程师们甩掉了图板和图纸,带来的效益大家都能理解。 目前系统工程师们…

python输出箭头代码_python matplotlib 注释文本箭头简单代码示例

注释文本箭头结果展示:完整代码示例:import numpy as npimport matplotlib.pyplot as pltfig,ax plt.subplots(figsize(5,5))ax.set_aspect(1)x1 -1 np.random.randn(100)y1 -1 np.random.randn(100)x2 1. np.random.randn(100)y2 1. np.random…

《数字孪生体技术白皮书》

导读:这几年,数字孪生体的概念炙手可热,越来越成为从工业到产业、从军事到民生各个领域的智慧新代表。数字孪生体实验室与安世亚太联合正式发布了《数字孪生体技术白皮书(2019)》。希望本白皮书能为业内同行提供参考&a…

python换行后开头有缩进_python编码规范(三)--空行,换行,缩进

1.空行空一行:用于类成员函数之间,或者用于区分不同逻辑块空两行:类与类,类与函数,函数与函数之间class Test(object):"""Test class,提供通用的方法"""def __init__(self):""…

数值计算软件有哪些?一款国产软件非常亮眼。

数值计算软件有哪些?一款国产软件非常亮眼。 数学软件由算法标准程序发展而来, 大致形成于70年代初期。随着几大数学软件工程的开展,如美国的NATS工程,人们探索了产生高质量数学软件的方式、方法和技术。 经过长期积累,已有丰富的、涉及广泛数…

linux 删除分区_详解linux系统架构--文件系统体系

概述之前已经对Linux系统架构的内核部分单独做了深入介绍,今天就拿Linux系统架构中的文件系统做一下介绍吧~先介绍下概念:文件系统是文件存放在磁盘等存储设备上的组织方法。Linux系统能支持多种目前流行的文件系统,如EXT2、 EXT3、EXT4、 FA…

什么是数字孪生,为什么对物联网很重要

数字孪生是物理设备的虚拟呈现,数据科学家和IT专业人员可以在开发实际项目之前使用数字孪生技术来模拟运行。数字孪生还改变了物联网、人工智能和数据分析等技术的优化方式。 什么是数字孪生? 数字孪生是指物理世界或系统的虚拟数字化呈现。数字孪生背后…

plsql如何查看mysql库_plsql 如何查看表数据库表

如何使用PLSQL Developer从oracle数据库 导入导出数据如何使用PLSQL Developer从oracle数据库 导入导出数据   用pl/sql developer导出表的数据时有三种方式:Oracle Export,Sql Insert,pl/sql developer   只有“Oracle Export”方式导出…