zoukankan      html  css  js  c++  java
  • 如何在markdown中插入js和css

    有时候我们可能需要改动markdown 的样式。由于markdown的呈现形式是html,可以直接把以下部分添加到markdown中,即可更改默认的样式

    代码如下:

    
    <style>
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: #737373;
        background-color: white;
        margin: 10px 13px 10px 13px;
    }
    table {
        margin: 10px 0 15px 0;
        border-collapse: collapse;
    }
    td,th { 
        border: 1px solid #ddd;
        padding: 3px 10px;
    }
    th {
        padding: 5px 10px;  
    }
    
    a {
        color: #0069d6;
    }
    a:hover {
        color: #0050a3;
        text-decoration: none;
    }
    a img {
        border: none;
    }
    p {
        margin-bottom: 9px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: red;
        line-height: 36px;
    }
    h1 {
        margin-bottom: 18px;
        font-size: 30px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 16px;
    }
    h5 {
        font-size: 14px;
    }
    h6 {
        font-size: 13px;
    }
    hr {
        margin: 0 0 19px;
        border: 0;
        border-bottom: 1px solid #ccc;
    }
    blockquote {
        padding: 13px 13px 21px 15px;
        margin-bottom: 18px;
        font-family:georgia,serif;
        font-style: italic;
    }
    blockquote:before {
        content:"201C";
        font-size:40px;
        margin-left:-10px;
        font-family:georgia,serif;
        color:#eee;
    }
    blockquote p {
        font-size: 14px;
        font-weight: 300;
        line-height: 18px;
        margin-bottom: 0;
        font-style: italic;
    }
    code, pre {
        font-family: Monaco, Andale Mono, Courier New, monospace;
    }
    code {
        background-color: #fee9cc;
        color: rgba(0, 0, 0, 0.75);
        padding: 1px 3px;
        font-size: 12px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    pre {
        display: block;
        padding: 14px;
        margin: 0 0 18px;
        line-height: 16px;
        font-size: 11px;
        border: 1px solid #d9d9d9;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    pre code {
        background-color: #fff;
        color:#737373;
        font-size: 11px;
        padding: 0;
    }
    sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }
    *{
        -webkit-print-color-adjust: exact;
    }
    @media screen and (min- 914px) {
        body {
             854px;
            margin:10px auto;
        }
    }
    @media print {
        body,code,pre code,h1,h2,h3,h4,h5,h6 {
            color: black;
        }
        table, pre {
            page-break-inside: avoid;
        }
    }
    </style>
    
    

    直接将以上代码插入文本的上方, 如下示例:

    生成html的结果为:

    image.png

    如何在Hexo发布博客的Md文件中引入JS代码

    跟引入css样式一样 直接插入js代码即可 这里有两种方式:

    第一种 引用第三方js文件

    <script type="text/javascript" src="/js/src/echarts.min.js"></script>
    

    第二种 常规写法

    <script>
    ​````
    var bmapChart=echarts.init(document.getElementById("map-wrap"));
    ​````
    </script>
    

    原文链接

  • 相关阅读:
    因式分解
    插入排序算法
    小技巧(杂乱篇章)
    错误的模糊应用(类继承问题)
    同源策略和跨域解决方案
    Django admin源码剖析
    Python中该使用%还是format来格式化字符串?
    Django的认证系统
    Django中间件
    Django form表单
  • 原文地址:https://www.cnblogs.com/songjianzaina/p/15209527.html
Copyright © 2011-2022 走看看