Typora / Highlight.js代码高亮

最新推荐文章于 2024-04-27 19:10:12 发布

Trabralizer

最新推荐文章于 2024-04-27 19:10:12 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/Trabralizer/article/details/106979355

版权

遇到一个问题：

遇到一个问题：如何在HTML中实现代码高亮？有什么方便而且简单的方法？

在经过一些思考+实践+Google后，得到了一些方法：

Typora

这是一个歪打正着的方法：

众所周知：Typora是一款Markdown编辑器，功能十分强大，是支持代码高亮的，也同时支持Markdown导出带格式的HTML

所以，我们可以用这个功能来实现：首先下载一个 Typora

编辑文本 —> 菜单 —> 导出 —> HTML

这导出的是一个带格式的HTML文件，打开可以看到里面包含了样式。由于这是一个模板，把body内的东西替换就行了

<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>Highlightjs</title><link href='https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css' /><style type='text/css'>html {
    overflow-x: initial !important;}:root {
     --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html {
     font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body {
     margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe {
     margin: auto; }
a.url {
     word-break: break-all; }
a:active, a:hover {
     outline: 0px; }
.in-text-selection, ::selection {
     text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write {
     margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p {
     text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * {
     text-indent: 0px; }
#write.first-line-indent li {
     margin-left: 2em; }
.for-image #write {
     padding-left: 8px; padding-right: 8px; }
body.typora-export {
     padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p {
     white-space: pre-wrap; }
@media screen and (max-width: 500px) {
    
  body.typora-export {
     padding-left: 0px; padding-right: 0px; }
  #write {
     padding-left: 20px; padding-right: 20px; }
  .CodeMirror-sizer {
     margin-left: 0px !important; }
  .CodeMirror-gutters {
     display: none !important; }
}
#write li > figure:last-child {
     margin-bottom: 0.5rem; }
#write ol, #write ul {
     position: relative; }
img {
     max-width: 100%; vertical-align: middle; }
button, input, select, textarea {
     color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] {
     line-height: normal; padding: 0px; }
*, ::after, ::before {
     box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre {
     width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p {
     position: relative; }
p {
     line-height: inherit; }
h1, h2, h3, h4, h5, h6 {
     break-after: avoid-page; break-inside: avoid; orphans: 2; }
p {
     orphans: 4; }
h1 {
     font-size: 2rem; }
h2 {
     font-size: 1.8rem; }
h3 {
     font-size: 1.6rem; }
h4 {
     font-size: 1.4rem; }
h5 {
     font-size: 1.2rem; }
h6 {
     font-size: 1rem; }
.***th-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p {
     margin-top: 1rem; margin-bottom: 1rem; }
.hidden {
     display: none; }
.md-blockmeta {
     color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a {
     cursor: pointer; }
sup.md-footnote {
     padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85

最低0.47元/天解锁文章

Trabralizer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Typora / Highlight.js代码高亮

遇到一个问题：遇到一个问题：如何在HTML中实现代码高亮？有什么方便而且简单的方法？在经过一些思考+实践+Google后，得到了一些方法：Typora这是一个歪打正着的方法：众所周知：Typora是一款Markdown编辑器，功能十分强大，是支持代码高亮的，也同时支持Markdown导出带格式的HTML所以，我们可以用这个功能来实现：首先下载一个 Typora编辑文本 —> 菜单 —> 导出 —> HTML这导出的是一个带格式的HTML文件，打开可以看到里面包含
复制链接

扫一扫