Question

我是HTML的新手，特别是在使用CSS格式化时。我正在使用Emacs的Org模式将我的文档发布到HTML。

我正在使用从这个漂亮的样式表here轻微修改的样式表：

由于我的Org模式导出到HTML包含C ++ / Python源代码片段，我希望它们以一个很好的编程固定宽度字体显示，该字体应该可以在许多机器上使用。（有什么建议吗？）

我需要在下面的.css文件中修改哪个标记才能获得以不同字体导出的源代码？所有相关的字体信息都在CSS文件的顶部附近。

这是我正在使用的样式表。

* {
    font-family: "Helvetica";
}

h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: "Times New Roman";
}

pre {
    font-family: "Lucida Console";
}

#text-table-of-contents a {
    font-family: "Helvetica";
}

/* @end */

/* @group Baseline */
body {
    font-size: 35px;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}
h1 {
    margin: 0;
    font-size: 1.6666666666666667em;
    line-height: 0.9em;
    margin-bottom: 0.9em;
}
h2 {
    margin: 0;
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 1em;
}
h3 {
    margin: 0;
    font-size: 1.3333333333333333em;
    line-height: 1.125em;
    margin-bottom: 1.125em;
}
h4 {
    margin: 0;
    font-size: 1.1666666666666667em;
    line-height: 1.2857142857142858em;
    margin-bottom: 1.2857142857142858em;
}
p, ul, blockquote, pre, td, th, label {
    margin: 0;
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}
p.small, #postamble {
    margin: 0;
    font-size: 0.8333333333333334em;
    line-height: 1.8em;
    margin-bottom: 1.8em;
}
table {
    border-collapse: collapse;
    margin-bottom: 1.5em;
}
/* @end */

/* @group Layout */

#content {
    /*width: 70em;*/
    width:fixed;
    margin-left: 55px;
    margin-right: 55px;

}

/* #header {
    height: 10em;
}
*/

#table-of-contents {
    width: 15em;
    float: left;
    overflow: auto;
}

/* #main { */
div.outline-2 {
        width: 52em;
    float: right;
    /* The lines below are useful if the "main" div isn't available and
       div.outline-2 has to be used. */
    position: relative;
}

#postamble {
    clear: both;
    text-align: center;
}

div.outline-2 pre {
    width: 40em;
    overflow: auto;
}

/* @end */

/* @group Header */

h1.title {
    margin-top: 10px;
    text-align: center;
}

h1.title {
    font-size: 4em;
    font-weight: bold;
    letter-spacing: -0.1em;
    margin-bottom: 0.2em;
}

/* @end */

/* @group Org Keywords */

.todo {
    color: red;
}

.done {
    color: green;
}

.tag {
    color: blue;
    text-transform: lowercase;
    /* This will be obscured by the surrounding span tag, so blank everything. */
    background: #fff;
    border: none;
    /* position: relative;
    text-align: right;
    right: 1em; */
}

.timestamp {
}

.timestamp-kwd  {
    /* keyword associated with a time stamp, like SCHEDULED */
}

.target {
    /* target for links */
}

/* @end */

/* @group Table of Contents */

#table-of-contents h2 {
    letter-spacing: -0.1em;
}

#table-of-contents ul,
#table-of-contents ol {
    padding-left: 1em;
}

/* @end */

/* @group Outline Level 2 */

.outline-2 h2 {
    background: #ffc;
    border-bottom: 1px solid #ccc;
}

.outline-2 h2, .outline-2 h3 {
    letter-spacing: -0.05em;
}

.outline-2 {
    padding: 5px;
    /* margin-bottom: 10px; */
    /* border-top: 1px solid #ccc; */
}

/* @end */

td {
    border: 1px solid #ccc;
}


h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    background-color: #eee;
    padding: 2px;
    border: 1px solid #ccc;
}

.outline-1, .outline-2, .outline-3, .outline-4, .outline-5, .outline-6 {
    margin-left: 0em;
}

a {
    text-decoration: none;
    color: #57d; /* TODO: Find a better colour for this. */
}

a:hover {
    border-bottom: 1px dotted #57d;
}

    #postamble p {
        margin: 0px;
}%

以下是有关Org模式如何支持CSS style-sheets.

的一些信息

由于我的Org模式导出包含源代码片段，我希望它们以一个很好的编程固定宽度字体显示，该字体应该在许多机器上可用。（有什么建议吗？）

我需要修改哪个标记才能获取源代码以不同的字体导出？

以下是HTML文档中源代码的显示方式。该字体对于源代码看起来不太好。

编辑：这是与上面的python代码对应的自动生成的HTML。

 <pre class="src src-python"><span style="color: #00cc00;"># </span><span style="color: #00cc00;">More comments here</span>
  <span style="color: #8ac6f2; font-weight: bold;">def</span> <span style="color: #cae682;">add</span><span style="color: #8c8c8c;">(</span>a,b<span style="color: #8c8c8c;">)</span>:
      <span style="color: #8ac6f2; font-weight: bold;">return</span> a+b      

  <span style="color: #8ac6f2; font-weight: bold;">def</span> <span style="color: #cae682;">main</span><span style="color: #8c8c8c;">()</span>:
      <span style="color: #8ac6f2; font-weight: bold;">print</span> <span style="color: #ff1a1a;">"Hello World"</span> <span style="color: #00cc00;"># </span><span style="color: #00cc00;">This is a comment</span>
      <span style="color: #8ac6f2; font-weight: bold;">print</span> add<span style="color: #8c8c8c;">(</span><span style="color: #e5786d;">6</span>,<span style="color: #e5786d;">7</span><span style="color: #8c8c8c;">)</span>
      &lt;&lt;assign_abc&gt;&gt;

以下是Org自动在生成的HTML文件的开头插入的样式表。它基于我在上面显示的.css文件中的默认设置和设置。

.
     <!--/*--><![CDATA[/*><!--*/
  .title  { text-align: center; }
  .todo   { font-family: monospace; color: red; }
  .done   { color: green; }
  .tag    { background-color: #eee; font-family: monospace;
            padding: 2px; font-size: 80%; font-weight: normal; }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  .right  { margin-left: auto; margin-right: 0px;  text-align: right; }
  .left   { margin-left: 0px;  margin-right: auto; text-align: left; }
  .center { margin-left: auto; margin-right: auto; text-align: center; }
  .underline { text-decoration: underline; }
  #postamble p, #preamble p { font-size: 90%; margin: .2em; }
  p.verse { margin-left: 3%; }
  pre {
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #eee;
    padding: 8pt;
    font-family: monospace;
    overflow: auto;
    margin: 1.2em;
  }
  pre.src {
    position: relative;
    overflow: visible;
    padding-top: 1.2em;
  }
  pre.src:before {
    display: none;
    position: absolute;
    background-color: white;
    top: -10px;
    right: 10px;
    padding: 3px;
    border: 1px solid black;
  }
  pre.src:hover:before { display: inline;}
  pre.src-sh:before    { content: 'sh'; }
  pre.src-bash:before  { content: 'sh'; }
  pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  pre.src-R:before     { content: 'R'; }
  pre.src-perl:before  { content: 'Perl'; }
  pre.src-java:before  { content: 'Java'; }
  pre.src-sql:before   { content: 'SQL'; }

  table { border-collapse:collapse; }
  caption.t-above { caption-side: top; }
  caption.t-bottom { caption-side: bottom; }
  td, th { vertical-align:top;  }
  th.right  { text-align: center;  }
  th.left   { text-align: center;   }
  th.center { text-align: center; }
  td.right  { text-align: right;  }
  td.left   { text-align: left;   }
  td.center { text-align: center; }
  dt { font-weight: bold; }
  .footpara:nth-child(2) { display: inline; }
  .footpara { display: block; }
  .footdef  { margin-bottom: 1em; }
  .figure { padding: 1em; }
  .figure p { text-align: center; }
  .inlinetask {
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
    background: #ffffcc;
  }
  #org-div-home-and-up
   { text-align: right; font-size: 70%; white-space: nowrap; }
  textarea { overflow-x: auto; }
  .linenr { font-size: smaller }
  .code-highlighted { background-color: #ffff00; }
  .org-info-js_info-navigation { border-style: none; }
  #org-info-js_console-label
    { font-size: 10px; font-weight: bold; white-space: nowrap; }
  .org-info-js_search-highlight
    { background-color: #ffff00; color: #000000; font-weight: bold; }
  /*]]>*/-->

这个样式表中的源代码标签是哪个？

0 个答案: