• SyntaxHighlighter在博客园中的样式错乱问题


    先放几个官网链接:

    demo:http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/
    使用说明(适合自己搭的博客):http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
    themes:http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
    brushes:http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
    下载(3.0.83):http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
    

        我的博客园后台编辑器用过TinyMCE(现在用的)和MarkDown,在两者编辑好的文章中插入syntaxHighlighter节点,样式都会跟官网提供的有很大出入,目测最大的问题是line-height和font-size被覆盖。我稍微调试了下发现,如果用我前头那篇随笔里的方法进行编辑的话,新导入的css和js文件都是插在标签里,而不是,这就导致了我新加的css优先级被降低或者说不能加载全。我这儿重新说下正确的在博客园里使用的步骤:

    1. 先下载,解压后目录如下。其中compass的css和scripts里的shCore.js是混淆过的,其他都是源码。styles和compass里有所有的brush和theme的js和css,到时候要用哪个就上传哪个到博客园文件列表里,我全部上传了

    2. head里引用css。将shCore.css和shThemeDefault.css的源码或者混淆后的代码复制到后台“页面定制CSS代码”。这里的配置对应在页面里是head中的

    <link type="text/css" rel="stylesheet" href="/blog/customcss/106912.css?v=%2fE9aIm8zFWP85YA0vZcDoHMyNl4%3d">
    

    3. 添加shCore.js以及你需要的brush对应的js文件引用到“页首Html代码”,这里是我的

    <script src="http://files.cnblogs.com/timelyxyz/shCore.js" type="text/javascript"></script>
    <script src="http://files.cnblogs.com/timelyxyz/shBrushJScript.js" type="text/javascript"></script>
    <script src="http://files.cnblogs.com/timelyxyz/shBrushXml.js" type="text/javascript"></script>
    <script src="http://files.cnblogs.com/timelyxyz/shBrushJava.js" type="text/javascript"></script>
    <script src="http://files.cnblogs.com/timelyxyz/shBrushBash.js" type="text/javascript"></script>
    

    4. 调用SyntaxHighlighter的js方法,生成样式。

    <script type="text/javascript">
    SyntaxHighlighter.all()
    </script>
    

    5. 现在开始纠正样式错乱问题。在“页面定制CSS代码”区域的最顶部,添加下面几个样式声明,用于消除网站原有的同名css的影响。另外,这段之后就是我们在第一步添加的shCore.css和shThemeDefault.css的代码。by the way, 1.5em是我个人的选择,这个行距我看的比较舒服。
    shCore.css的第一个样式声明需要修改行高和字号,我分别选择了1.5em和13px,跟上面的选择保持一致就好。下面是在“页面定制CSS代码”里修改过的代码,其他的还是按照第一步的来

    .container textarea{line-height: 1.5em!important;}
    .syntaxhighlighter .line {line-height: 1.5em!important; }
    .syntaxhighlighter code{line-height:1.5em !important; white-space: inherit;}
    /**
     * SyntaxHighlighter
     * http://alexgorbatchev.com/SyntaxHighlighter
     *
     * SyntaxHighlighter is donationware. If you are using it, please donate.
     * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
     *
     * @version
     * 3.0.83 (July 02 2010)
     * 
     * @copyright
     * Copyright (C) 2004-2010 Alex Gorbatchev.
     *
     * @license
     * Dual licensed under the MIT and GPL licenses.
     */
    .syntaxhighlighter a,
    .syntaxhighlighter div,
    .syntaxhighlighter code,
    .syntaxhighlighter table,
    .syntaxhighlighter table td,
    .syntaxhighlighter table tr,
    .syntaxhighlighter table tbody,
    .syntaxhighlighter table thead,
    .syntaxhighlighter table caption,
    .syntaxhighlighter textarea {
      -moz-border-radius: 0 0 0 0 !important;
      -webkit-border-radius: 0 0 0 0 !important;
      background: none !important;
      border: 0 !important;
      bottom: auto !important;
      float: none !important;
      height: auto !important;
      left: auto !important;
      line-height: 1.5em !important;
      margin: 0 !important;
      outline: 0 !important;
      overflow: visible !important;
      padding: 0 !important;
      position: static !important;
      right: auto !important;
      text-align: left !important;
      top: auto !important;
      vertical-align: baseline !important;
       auto !important;
      box-sizing: content-box !important;
      font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
      font-weight: normal !important;
      font-style: normal !important;
      font-size: 13px !important;
      min-height: inherit !important;
      min-height: auto !important;
    }
    
  • 相关阅读:
    Java
    Java
    Java
    其他
    Java
    Java
    Java
    正则
    Win10
    【转】Flask 上下文机制和线程隔离
  • 原文地址:https://www.cnblogs.com/timelyxyz/p/3633757.html
Copyright © 2020-2023  润新知