Which is the tag for source code in this style
I am very new to HTML especially when using CSS to format it. I am using Org mode of Emacs to publish my documents to HTML.
I am using a style-sheet lightly modified from this nice style-sheet here:
Since my Org mode export to HTML includes C++/Python source code fragments, I would like them to be displayed in a nice programming fixed-width font which should be available on many machines. (Any recommendations btw?)
Which is the tag I need to modify in the .css file below to get the source code exported in a different font? All the relevant font information is near the top of the CSS file.
Here is the style-sheet I am using.
* {
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;
}%
Here is some information on how Org mode supports CSS style-sheets.
Since my Org mode export includes source code fragments, I would like them to be displayed in a nice programming fixed-width font which should be available on many machines. (Any recommendations btw?)
Which is the tag I need to modify to get the source code exported in a different font?
Here is how the source code is displayed in the HTML documents. The font does not look nice for source code.
EDIT: Here is the auto-generated HTML corresponding to the python code above.
<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>
<<assign_abc>>
Here is the stylesheet which Org automatically inserts at the beginning of the generated HTML file. It is based on the default settings and the settings in the .css file I showed above.
.
<!--/*--><![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; }
/*]]>*/-->
上一篇: CSS文件没有响应
下一篇: 这是这种风格的源代码标签