[maxiang] 马克飞象自定义样式

0x00前言

打印版的字体只针对自己的电脑有效,网页浏览版的网络良好下字体有效
网页版的代码部分几乎没有自定义样式,后续也许会补上的,打印版的全部是黑色的。

网页浏览使用

预览




源码

@import url('https://fonts.loli.net/css?family=ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei&display=swap');
@import url('https://fonts.loli.net/css?family=Long+Cang&display=swap');
@import url('https://fonts.loli.net/css?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.loli.net/css?family=Patrick+Hand&display=swap');

/* 全文字体 */
* {
    font-family: 'ZCOOL KuaiLe';
}

/* 标题的样式 (#) */
h1, h2, h3, h4, h5, h6 {
    color: blueviolet;
    font-family: 'ZCOOL XiaoWei';
}

/* 链接 ([]()) */
a {
    font-family: inherit;
    text-decoration: underline;
}

/* 引用: (>) */
blockquote {
    background: none;
    box-shadow: -2px 2px 7px 2px blueviolet;
    margin: 10px 5px 10px 5px;
    padding: 5px 10px 10px 15px;
    border-width: 0;
    padding: 5px 10px 10px 15px;
    font-family: 'ZCOOL KuaiLe';
    font-size: 18px;
}

/* 水平线 (---) */
hr {
    margin: 2em 0;
    height: 3px;
    background-image: linear-gradient(to right, red 0%, red 17%, orange 17%, orange 34%, yellow 34%, yellow 50%, green 50%, green 67%, blue 67%, blue 84%, purple 84%, purple 100%);
    border-width: 0;
}

/* 删除线 (~~文字~~) */
del, s {
    text-decoration: line-through;
    text-decoration-color: red;
}

/* 代码 */
div.hljs, div.hljs-line, .hljs-line span {
    font-family: "yahei consolas hybrid", 'Ubuntu Mono', monospace, consolas, console, "Courier New" !important;
}

文件打印使用

PS:代码高亮为无

预览




源码

@import url('https://fonts.loli.net/css?family=ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei&display=swap');
@import url('https://fonts.loli.net/css?family=Long+Cang&display=swap');
@import url('https://fonts.loli.net/css?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.loli.net/css?family=Patrick+Hand&display=swap');

/* 全文字体 */
* {
    font-family: 'ZCOOL KuaiLe';
    color: black;
}

/* 标题的样式 (#) */
h1, h2, h3, h4, h5, h6 {
    color: black;
    font-family: 'ZCOOL XiaoWei';
}

/* 链接 ([]()) */
a {
    color: black;
    text-decoration: underline;
}

/* 引用: (>) */
blockquote {
    background: none;
    margin: 10px 5px 10px 5px;
    padding: 5px 10px 10px 15px;
    border: 5px solid black;
    border-width: 3px;
    border-color: black;
    border-radius: 5px;
    padding: 5px 10px 10px 15px;
    font-family: 'ZCOOL KuaiLe';
    font-size: 18px;
}

/* 水平线 (---) */
hr {
    margin: 2em 0;
    height: 3px;
    border-width: 0;
    background-color: black;
}

/* 删除线 (~~文字~~) */
del, s {
    text-decoration: line-through;
}

/* 代码 */
.hljs, .hljs-line, div.hljs-line, .hljs-line span {
    font-family: "yahei consolas hybrid", 'Ubuntu Mono', monospace, consolas, console, "Courier New" !important;
    font-size: 10px;
    color: black;
}
pre, code {
    border: 1px solid black;
    border-radius: 0;
}
pre {
    padding-left: 10px;
}
pre code {
    border: none;
}

原文地址:https://www.cnblogs.com/by-sknight/p/11415374.html

时间: 2024-09-30 00:02:13

[maxiang] 马克飞象自定义样式的相关文章

马克飞象 Markdown 使用和学习

第三方学习网站 http://sspai.com/25137 https://maxiang.io/ 使用工具:有道云笔记 https://note.youdao.com/ 新建时使用Mardown类型即可: demo: # 欢迎使用马克飞象 @(示例笔记本)[马克飞象|帮助|Markdown] **马克飞象**是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验.特点概述: - **功能丰富**

欢迎使用马克飞象1

欢迎使用马克飞象 @(示例笔记本)[马克飞象|帮助|Markdown] 马克飞象是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验.特点概述: 功能丰富 :支持高亮代码块.LaTeX 公式.流程图,本地图片以及附件上传,甚至截图粘贴,工作学习好帮手: 得心应手 :简洁高效的编辑器,提供桌面客户端以及离线Chrome App,支持移动端 Web: 深度整合 :支持选择笔记本和添加标签,支持从印象笔记

关于马克飞象

欢迎使用马克飞象 马克飞象是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验.特点概述: 功能丰富 :支持高亮代码块.LaTeX 公式.流程图,本地图片上传甚至截图粘贴,工作学习好帮手: 得心应手 :简洁高效的编辑器,提供桌面离线客户端,支持移动端 Web: 深度整合 :支持选择笔记本和添加标签,支持从印象笔记跳转编辑,轻松管理. Markdown简介 0 代码块 1 LaTeX 公式 2 表格

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. 在DataGrid中的最高水平,你可以改变的外观和感觉,通过设置一些: Property Type Values Default AlternatingRowBackground Brush Any Brush Null Background Brush Any

WPF自定义样式篇-DataGrid

WPF自定义样式篇-DataGrid 先上效果图: 样式: <!--DataGrid样式-->    <Style TargetType="DataGrid">        <Setter Property="RowHeaderWidth" Value="0"></Setter>        <Setter Property="AutoGenerateColumns"

超详细的Xcode代码格式化教程,可自定义样式

为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题. 在之前,我们可能会写完代码后,再一点一点去调格式,很浪费时间. 有了ClangFormat插件后,就可以一键把代码格式化成统一的样式,不仅节省了时间,也使得代码更规范.我们还可以定制自己喜欢的样式. 安装ClangFormat插件 可以手动安装(下载GitHub项目编译),也可以用Alcatraz(插件管理器)安装,都很简单,具体可以看我的文章<Xcode方便开发的插件推荐>

SeekBar自定义样式

网上的SeekBar自定义样式的资料很多,大多是抄来抄去.我最近用到这个,也从网上抄了一个,但是遇到不少问题,其中一个就是SeekBar的背景条不显示,最后才找到解决方法. 1. 使用自定义SeekBar <SeekBar android:id="@+id/ctrl_seekBar" android:layout_width="wrap_content" android:layout_height="wrap_content" androi

[android] 安卓自定义样式和主题

简单练习自定义样式和主题,样式是加在View上,主题是加在Application或者Activity上 styles.xml <?xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 自定义样式 --> <style name=&quo

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz