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>
    

    原文链接

  • 相关阅读:
    安卓给DatePicker设置选择日期后的监听
    Linux端口相关一些命令
    安卓使用Zxing创建二维码
    vue中this.$router.push()路由跳转和传参
    C# 获取请求头中包含指定元素的值
    各种JSON格式数据
    SQL 中 char、nchar、varchar、nvarchar 的区别
    vue中表单修饰符
    vue 中的export 、 export default 和 new Vue({})
    String or binary data would be truncated.
  • 原文地址:https://www.cnblogs.com/songjianzaina/p/15209527.html
Copyright © 2011-2022 走看看