gongzhitaao / orgcss Goto Github PK
View Code? Open in Web Editor NEWSimple and clean CSS for Org-exported HTML
Home Page: https://gongzhitaao.org/orgcss/
License: Other
Simple and clean CSS for Org-exported HTML
Home Page: https://gongzhitaao.org/orgcss/
License: Other
Hi,
I'm sorry if it is obvious for someone who knows the css world, but I struggle to build this project by hand. Would you mind providing build instructions?
I guess it requires running gulp. But only after an export of index.org and ref.bib?
$ ./node_modules/.bin/gulp
[08:09:47] Using gulpfile ~/Code/github/orgcss/gulpfile.js
[08:09:47] Starting 'default'...
[08:09:47] Starting 'build'...
[08:09:47] Starting 'clean'...
[08:09:47] Finished 'clean' after 2.78 ms
[08:09:47] Starting 'pages'...
[08:09:47] Starting 'styles'...
[08:09:47] Starting 'misc'...
[08:09:48] 'pages' errored after 554 ms
[08:09:48] Error: File not found with singular glob: /home/louis/Code/github/orgcss/src/index.html (if this was purposeful, use `allowEmpty` option)
at Glob.<anonymous> (/home/louis/Code/github/orgcss/node_modules/glob-stream/readable.js:84:17)
at Object.onceWrapper (events.js:315:30)
at emitOne (events.js:116:13)
at Glob.emit (events.js:211:7)
at Glob._finish (/home/louis/Code/github/orgcss/node_modules/glob/glob.js:197:8)
at done (/home/louis/Code/github/orgcss/node_modules/glob/glob.js:182:14)
at Glob._processSimple2 (/home/louis/Code/github/orgcss/node_modules/glob/glob.js:688:12)
at /home/louis/Code/github/orgcss/node_modules/glob/glob.js:676:10
at Glob._stat2 (/home/louis/Code/github/orgcss/node_modules/glob/glob.js:772:12)
at lstatcb_ (/home/louis/Code/github/orgcss/node_modules/glob/glob.js:764:12)
[08:09:48] 'build' errored after 558 ms
[08:09:48] 'default' errored after 559 ms
[08:09:48] The following tasks did not complete: styles, misc
[08:09:48] Did you forget to signal async completion?
Source blocks for certain languages get a nice label on the top right of the block, showing which language it is.
The magic seems to happen here:
Line 318 in 1c36ba2
Is it possible to add more languages? E.g. Python, Go, Rust, Erlang, Elixir, etc.
I really like your CSS!
I am surprised at the lack of spacing between paragraphs though. Is that intentional? I find it hard to see where one ends and the next starts.
Hi @gongzhitaao
Thanks for your great work on this.
I wonder if you can add a copy button for code block so that people can copy the code snippets quickly, especially for long and large blocks.
If I were to use just the CSS code that governs the syntax coloring, which license should I also include?
Org-mode has admonitions supported like
#+begin_warning
Org-mode is addictive; use it at your own risk!
#+end_warning
The exported HTML looks like
<div class="note" id="org12345">
<p>
Org-mode is addictive; use it at your own risk!
</p>
</div>
Can we add support for such admonitions?
Here's a list of admonitions commonly supported by Org, reStructured Text, AsciiDoc, DocBook, RTD, DocUtils; refer:
Hello,
I am a user of org-roam-server, which uses this package. I've been having an issue with the MathJax rendering, as can be seen in the following screenshot:
What is happening is that I am using commands from the Physics and AMS packages in LaTeX, and this works inside of org-mode because of my latex_header preamble. However, when exporting to html/css using MathJax, it doesn't use the Physics or AMS packages (or any other package, for that matter).
However, I think that there is a fix for this issue. MathJax has extensions that can be enabled (http://docs.mathjax.org/en/latest/input/tex/extensions/). How exactly would one go about enabling these in orgcss be default?
Thanks
Enumerated lists letters like a., A., a) and A) are supported by org-mode syntax, but requires to (setq org-list-allow-alphabetical t)
in .emacs
, which I have added to my configuration.
But when I produce in org:
1. Arabic (decimal) numbered list item. We add a few words to show the line
wrapping.
A. Upper case alpha (letter) numbered list item.
a. Lower alpha.
b. Lower alpha.
B. Upper alpha.
2. Number.
in hopes getting enumerated list with letters, css still displays only numbers after html export, like so:
1. Arabic (decimal) numbered list item. We add a few words to show the line wrapping.
1. Upper case alpha (letter) numbered list item.
1. Lower alpha.
2. Lower alpha.
2. Upper alpha.
2. Number.
I investigated and found a mention the export output depends on css file, which I believe is not yet supported by your version?
Please add a license file to clarify whether you appreciate the usage of your CSS templates by others.
In org-default.css, Lines 3-560 and Lines 569-1126 are exactly the same.
Is it for browser compatibility or something similar? The hosted version looks like the rules are removed while minifying: is this expected behavior? Should the duplicate lines be removed?
I just wanted to suggest the addition of something like this in org.css,
.figure p { text-align: center; }
.org-svg { width: auto; vertical-align:-3%; }
This centres the LaTex picture fragments better when not using MathJax (one might not want to use MathJax to support an arbitrary LaTex package). Here is a before and after,
Hey!
Really Great Work.
I think you can also add a scroll to top button so that when the user reaches the end then he/she can reach the top and can access the other topics from the table of contents from this button.
Hi,
I'm trying to generate the index.org using provided org.css files, but there is a little typo in index.org :
#+HTML_HEAD: <link id="pagestyle" rel="stylesheet" type="text/css" href="org.css"/>
corrected to
#+HTML_HEAD: <link id="pagestyle" rel="stylesheet" type="text/css" href="css/org.css"/>
When i compile using org version 9.3, left margin disapear, see the screen shoot joined
I use your css to write help files in org mode for iOS apps. It would be nice to add support for dark mode (see https://developer.apple.com/videos/play/wwdc2019/511/).
In the known issues section the back reference issue is fixed during the build time? How would I apply the same fix?
The postamble to use with your css looks like this. The classes author
and date
are on a
and span
elements. But the default postamble only contains p
elements. It would be nice to support it so that a custom postamble is not required.
orgcss postamble:
<div id="postamble" class="status">
<a class="author">Louis Roché</a>
<span class="date">2018-04-16 Mon 00:25</span>
</div>
original postamble:
<div id="postamble" class="status">
<p class="author">Author: Louis Roché</p>
<p class="date">Created: 2018-04-16 Mon 00:13</p>
</div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.