I'm using org-mode to write blog post(wordpress).
Because I'm using a plugin for syntax highlighting, I don't need to use org-mode's syntax highlighting.
Here is example.
Source in emacs.
Exported output.
When I remove language field followed BEGIN_SRC, syntax highlighting is also disapeared. But I just want to disable syntax highlighting only when exporting without removing language field(emacs-lisp).
Also I tested below, but it does not work.
(setq org-src-fontify-natively t)
============ UPDATE ============
I applied below. (Thanks #Picaud Vincent)
(setq org-html-htmlize-output-type 'nil)
It works fine with source block without language field. But It does not work with source block with language field.
here is example.
In .emacs file..
(setq org-html-htmlize-output-type 'nil)
without language field
origin
#+BEGIN_SRC
(setq org-todo-keywords
'((sequence "TODO" "FEEDBACK" "VERIFY" "|" "DONE" "DELEGATED")))
#+END_SRC
exported
<pre class="example">
(setq org-todo-keywords
'((sequence "TODO" "FEEDBACK" "VERIFY" "|" "DONE" "DELEGATED")))
</pre>
with language field
origin
#+BEGIN_SRC emacs-lisp
(setq org-todo-keywords
'((sequence "TODO" "FEEDBACK" "VERIFY" "|" "DONE" "DELEGATED")))
#+END_SRC
exported
<div class="org-src-container">
<pre class="src src-emacs-lisp"></pre>
============ UPDATE ============
Finally, I found solution.
Follow #Picaud Vincent' answer.
(setq org-html-htmlize-output-typenil)`
If There is no code in source block with language field, add exports: code to language field.
ex> #+BEGIN_SRC emacs-lisp:exports code
Although adding 'exports: code` disables syntax highlighting in org-mode buffer, but it solve my problem.
Maybe you can try to customize the org-html-htmlize-output-type variable:
Usual HTML export looks like:
however, with this customization
(setq org-html-htmlize-output-type `nil)
you get plain text:
This variable and other customizable ones are defined in the ox-html.el file.
Update: complete html sources
Before:
<div class="org-src-container">
<pre class="src src-emacs-lisp">(<span style="color: #a020f0;">defcustom</span> <span style="color: #a0522d;">org-html-htmlize-output-type</span> 'inline-css
<span style="color: #8b2252;">"Output type to be used by htmlize when formatting code snippets.</span>
<span style="color: #8b2252;">Choices are `</span><span style="color: #008b8b;">css</span><span style="color: #8b2252;">' to export the CSS selectors only,`</span><span style="color: #008b8b;">inline-css</span><span style="color: #8b2252;">'</span>
<span style="color: #8b2252;">to export the CSS attribute values inline in the HTML or `</span><span style="color: #008b8b;">nil</span><span style="color: #8b2252;">' to</span>
<span style="color: #8b2252;">export plain text. We use as default `</span><span style="color: #008b8b;">inline-css</span><span style="color: #8b2252;">', in order to</span>
<span style="color: #8b2252;">make the resulting HTML self-containing.</span>
<span style="color: #8b2252;">However, this will fail when using Emacs in batch mode for export, because</span>
<span style="color: #8b2252;">then no rich font definitions are in place. It will also not be good if</span>
<span style="color: #8b2252;">people with different Emacs setup contribute HTML files to a website,</span>
<span style="color: #8b2252;">because the fonts will represent the individual setups. In these cases,</span>
<span style="color: #8b2252;">it is much better to let Org/Htmlize assign classes only, and to use</span>
<span style="color: #8b2252;">a style file to define the look of these classes.</span>
<span style="color: #8b2252;">To get a start for your css file, start Emacs session and make sure that</span>
<span style="color: #8b2252;">all the faces you are interested in are defined, for example by loading files</span>
<span style="color: #8b2252;">in all modes you want. Then, use the command</span>
<span style="color: #8b2252;">`\\[</span><span style="color: #008b8b;">org-html-htmlize-generate-css</span><span style="color: #8b2252;">]' to extract class definitions."</span>
<span style="color: #483d8b;">:group</span> 'org-export-html
<span style="color: #483d8b;">:type</span> '(choice (const css) (const inline-css) (const nil)))
(<span style="color: #a020f0;">defcustom</span> <span style="color: #a0522d;">org-html-htmlize-font-prefix</span> <span style="color: #8b2252;">"org-"</span>
<span style="color: #8b2252;">"The prefix for CSS class names for htmlize font specifications."</span>
<span style="color: #483d8b;">:group</span> 'org-export-html
<span style="color: #483d8b;">:type</span> 'string)
</pre>
</div>
After:
<div class="org-src-container">
<pre class="src src-emacs-lisp">(defcustom org-html-htmlize-output-type 'inline-css
"Output type to be used by htmlize when formatting code snippets.
Choices are `css' to export the CSS selectors only,`inline-css'
to export the CSS attribute values inline in the HTML or `nil' to
export plain text. We use as default `inline-css', in order to
make the resulting HTML self-containing.
However, this will fail when using Emacs in batch mode for export, because
then no rich font definitions are in place. It will also not be good if
people with different Emacs setup contribute HTML files to a website,
because the fonts will represent the individual setups. In these cases,
it is much better to let Org/Htmlize assign classes only, and to use
a style file to define the look of these classes.
To get a start for your css file, start Emacs session and make sure that
all the faces you are interested in are defined, for example by loading files
in all modes you want. Then, use the command
`\\[org-html-htmlize-generate-css]' to extract class definitions."
:group 'org-export-html
:type '(choice (const css) (const inline-css) (const nil)))
(defcustom org-html-htmlize-font-prefix "org-"
"The prefix for CSS class names for htmlize font specifications."
:group 'org-export-html
:type 'string)
</pre>
</div>
Related
I am giving a programming talk. Rather than use slides, I am presenting a sequence of incrementally longer programs, stored in filenames 0001.py, 0002.py, etc.
The code in each program introduces just one or a few lines of code as a modification to the preceding one.
I intend to present solely using emacs. I am familiar with ediff, but it would be a bit of a pain to use it live during a talk (as there are about 50 small programs, with one minute to introduce each increment).
Does there exist an emacs package that would allow me to split the window and to highlight what is actually different between (n).py and (n+1).py. (I'm using .py for concreteness, but hopefully the solution would work for any text file.)
I am asking here rather than on https://emacs.stackexchange.com because I will be happy with a solution using emacs, git, or any combination that I can string together to give a live demo, especially with the ability to modify the code live while answering questions.
Update
As phils suggests, M-x compare-windows almost solves this issue, but:
It would be nice if it works correctly regardless of the current position of the cursor in the two buffers.
It would be nice if all changes appear in one view, rather than iterating over the diffs. The point is to say "see, in the program on the right I've added just this line and that line, and look at all that that program can do compared to the previous one."
Update 2
In other words, how do I generate what is done manually in the HTML below to show the differences side-by-side?
.myflex {
display: flex;
flex-direction: row;
}
.before,
.after {
border: 1px solid black;
padding: 20px;
margin: 20px;
border-radius: 2px;
}
.pink {
background-color: pink;
}
.green {
background-color: PaleGreen;
}
<div class="myflex">
<div class="before">
<pre>
<span class='pink'>And so without particularly analyzing all the contiguous sections of a</span>
<span class='pink'>cone and of the ranks of an army, or the ranks and positions in any</span>
while the less their direct participation in the action itself, the more
they command and the fewer of them there are; rising in this way from
the lowest ranks to the man at the top, who takes the least direct share
in the action and directs his activity chiefly to commanding.
</pre>
</div>
<div class="after">
<pre>
<span class='green'>We see a law by which men, to take associated action, combine</span>
<span class='green'>in such relations that the more directly they participate in performing</span>
<span class='green'>the action the less they can command and the more numerous they are,</span>
while the less their direct participation in the action itself, the more
they command and the fewer of them there are; rising in this way from
the lowest ranks to the man at the top, who takes the least direct share
in the action and directs his activity chiefly to commanding.
</pre>
</div>
</div>
Sequel
(I'm only adding this sequel here because phils generously volunteered to answer more than I was initially asking for.)
Consider the program (in some imaginary language, stored in a .txt file):
hello
and consider that we insert a keyword that requires indentation:
repeat:
hello
Now when we show the two programs in split-window, it would be nice if the hi is not highlighted, despite that the two lines differ by indentation; only the repeat: is.
The idea is that we'd be adding some loop operator and do not wish the gaze of the listener to go to either the indentation or to the entire line, only to the operator.
In other words, when displaying the difference, we would ideally highlight the repeat line, but neither hello nor the indentation preceding it.
I suspect that some existing diff functionality can do this and so there'll be a better answer, but I've hacked the following together using compare-windows.
(defun my-compare-windows-complete (&optional ignore-whitespace)
"Highlight all differences between two windows.
With a prefix argument, do not highlight whitespace-only differences.
\(This does not prevent the highlighting of whitespace that is part of
a difference which includes non-whitespace characters.)
To remove the highlighting, use \\[compare-windows-dehighlight]."
(interactive "P")
(require 'cl-lib)
(require 'compare-w)
(compare-windows-dehighlight)
(let ((w1 (get-buffer-window))
(w2 (funcall compare-windows-get-window-function)))
(cl-letf ((w1p (window-point w1))
(w2p (window-point w2))
(compare-windows-highlight 'persistent)
((symbol-function 'compare-windows-dehighlight) #'ignore)
((symbol-function 'ding) (lambda () (error "done"))))
(with-selected-window w1
(goto-char (point-min)))
(with-selected-window w2
(goto-char (point-min)))
(ignore-errors
(while (compare-windows ignore-whitespace)))
;; Highlight any non-matching remainder in both buffers.
(let ((b1 (window-buffer w1))
(b2 (window-buffer w2))
(p1 (window-point w1))
(p2 (window-point w2))
(max1 (with-selected-window w1 (point-max)))
(max2 (with-selected-window w2 (point-max))))
(compare-windows-highlight p1 max1 b1 w1 p2 max2 b2 w2))
(set-window-point w1 w1p)
(set-window-point w2 w2p))))
You can use M-x compare-windows-dehighlight afterwards to remove the highlighting.
The faces used for highlighting are:
compare-windows-removed (inheriting from diff-removed)
compare-windows-added (inheriting from diff-added)
A file under org-mode can be exported to HTML using this:
C-c C-e h o
or
(org-export-dispatch) h o
And you'll get that ugly looking times font...
Is there a simple way to set another font?
Also interested in what is the proper (complicated) way :)
You have different options, depending on how elaborate you want to get...
Easiest:
#+HTML_HEAD_EXTRA: <style>*{font-family: serif !important}</style>
More advanced:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="myStyleSheet.css"/>
You can also put it all into a setup file and include it in your org-file:
#+SETUPFILE: ~/.emacs.d/org-templates/level-0.org
In that file there could be stuff like this (in this case, Charset, your stylesheet, Mathjax for nice Latex-style formulars):
#+HTML_HEAD_EXTRA: <meta charset="utf-8">
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="static/myStyle.css" />
#+HTML_HEAD_EXTRA: <script async type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Unfortunately, always manually adding options is really a pain in the a**.
Here is an automatic way to do it (add to .emacs.d/init.el):
(defun my-change-style (backend)
(when (org-export-derived-backend-p backend 'html)
(beginning-of-buffer)
(insert "#+OPTIONS: html-postamble:nil")
(newline)
(insert "#+OPTIONS: org-html-head-include-default-style:nil")
(newline)
(insert "#+HTML_HEAD_EXTRA: <style>*{font-family: sans-serif !important; font-size: small;}</s\
tyle>")
(newline)
))
(add-hook 'org-export-before-parsing-hook #'my-change-style)
This injects the text right prior to the export in the top lines. In this example, we disable some cruft like validation link, author and date, and adjust the font.
I'm trying to embed a literate code example as HTML in Emacs org-mode.
The idea is that I can use something like
#+BEGIN_SRC html :noweb-ref content :exports source
<span>some content </span>
#+END_SRC
#+BEGIN_HTML :noweb tangle
<<content>>
#+END_HTML
Would something like this be possible? Because currently I have to copy&paste the part I want to be included (quoted) in the HTML source and the SRC bit that I want to show in the document.
EDIT: The concrete use case is that I would like to write a document explaining some HTML constructs (as a code block) and embedding (quoted) those same constructs in the document, without copy+paste
The example below is adapted from something similar I've used for writing about Org-mode. It seems to work for your use case too. The #+OPTIONS: d:RESULTS ensures that the :RESULTS: drawer is exported. Put this in an Org-mode buffer and export to HTML.
#+OPTIONS: d:RESULTS
* Examples
The HTML source
#+name: eg-1
#+begin_src org :results replace drawer :exports both :post wrap-html(text=*this*)
A <b>bold</b> statement.
#+end_src
Results in the output
#+results: eg-1
* Utils :noexport:
#+name: wrap-html
#+begin_src emacs-lisp :var text="" :results raw
(concat "#+BEGIN_HTML\n<div class=\"html-output\">\n" text "\n</div>\n#+END_HTML")
#+end_src
You can avoid repeating the headers by adding them as properties to the subtree heading, e.g.
* Example 2
:PROPERTIES:
:results: replace drawer
:exports: both
:post: wrap-html(text=*this*)
:END:
#+name: eg-2
#+begin_src org
Some <i>italic</i>.
#+end_src
#+results: eg-2
#+name: eg-3
#+begin_src org
You can <b>nest <i>inline</i> tags</b>.
#+end_src
#+results: eg-3
but note that these headers will apply to every source block in the subtree unless explicitly overridden.
I believe you have to make the following changes:
Give your first block a name
Change your HTML block to a SRC block
Add a :tangle <file-name> to your second block
Try this:
#+NAME: content
#+BEGIN_SRC html :exports none
<span>some content </span>
#+END_SRC
#+BEGIN_SRC html :tangle output-file :exports none :noweb yes
<<content>>
#+END_SRC
I had a similar requirement recently, and wrote ob-browser. It takes HTML source blocks and uses org-babel and phantomjs to display images of how the browser would render them.
So you can say:
#+BEGIN_SRC browser :out demo.png
<!DOCTYPE html>
<html>
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row">
<div class="span6 offset1">
<h1>Rendered PNG</h1>
<button class="btn btn-primary">You Can't Press This</button>
</div>
</div>
</body>
</html>
#+END_SRC
And get the image:
It doesn't do exactly what you're asking, but may scratch the same itch...
In html created from org-mode, you can have links open in new tabs if specified as
#+ATTR_HTML: target="_blank"
[[http://cnn.com][CNN]]
which I found here.
However, this doesn't work if [[http://cnn.com][CNN]] is a bulleted item. For instance,
#+ATTR_HTML: target="_blank"
- [[http://cnn.com][CNN]]
Or
- #+ATTR_HTML: target="_blank"
[[http://cnn.com][CNN]]
1) How can I make this work, and 2) can I set this html attribute for all links on a particular page by specifying some form of this option at the top (possibly some argument to #+OPTIONS:)?
I found adding the following works:
#+HTML_HEAD: <base target="_blank">
Short answer: replace string in function org-export-attach-captions-and-attributes:
diff -u -L /home/eab/.emacs.d/el-get/org-mode/lisp/org-exp.el -L \#\<buffer\ el-get/org-exp.el\> /home/eab/.emacs.d/el-get/org-mode/lisp/org-exp.el /tmp/buffer-content-8644Ge2
--- /home/eab/.emacs.d/el-get/org-mode/lisp/org-exp.el
+++ #<buffer el-get/org-exp.el>
## -1935,7 +1935,7 ##
"\\|"
"^[ \t]*\\(|[^-]\\)"
"\\|"
- "^[ \t]*\\[\\[.*\\]\\][ \t]*$"))
+ "^.*\\[\\[.*\\]\\][ \t]*$"))
cap shortn attr label end)
(while (re-search-forward re nil t)
(cond
Long comment about troubles.
Let see source code of function, which parses #+ATTR_BACKEND into text properties.
(defun org-export-attach-captions-and-attributes (target-alist)
"Move #+CAPTION, #+ATTR_BACKEND, and #+LABEL text into text properties.
If the next thing following is a table, add the text properties to the first
table line. If it is a link, add it to the line containing the link."
(goto-char (point-min))
(remove-text-properties (point-min) (point-max)
'(org-caption nil org-attributes nil))
(let ((case-fold-search t)
(re (concat "^[ \t]*#\\+caption:[ \t]+\\(.*\\)"
"\\|"
"^[ \t]*#\\+attr_" (symbol-name org-export-current-backend) ":[ \t]+\\(.*\\)"
"\\|"
"^[ \t]*#\\+label:[ \t]+\\(.*\\)"
"\\|"
"^[ \t]*\\(|[^-]\\)"
"\\|"
"^[ \t]*\\[\\[.*\\]\\][ \t]*$"))
...)))
org-export-current-backend is HTML in this case.
It works for such text
#+ATTR_HTML: target="_blank"
[[http://cnn.com][CNN]]
like this:
1) parse whole line #+ATTR_HTML: target="_blank" by regexp "^[ \t]*#\\+attr_"...
2) parse whole line [[http://cnn.com][CNN]] by regexp "^[ \t]*\\[\\[.*\\]\\][ \t]*$"
3) delete string #+ATTR_HTML: target="_blank" before export to html
4) set property target="_blank" for line [[http://cnn.com][CNN]]
And then org-mode prepares html link for export with this property.
If I replace string "^[ \t]*\\[\\[.*\\]\\][ \t]*$" by "^.*\\[\\[.*\\]\\][ \t]*$" then this patched function works for
#+ATTR_HTML: target="_blank"
- [[http://cnn.com][CNN]]
too. But there is a problem for list
- [[http://cnn.com][CNN]]
- [[http://cnn.com][CNN]]
- some text
If I put ATTR_HTML before each link
#+ATTR_HTML: target="_blank"
- [[http://cnn.com][CNN]]
#+ATTR_HTML: target="_blank"
- [[http://cnn.com][CNN]]
- some text
then I get such output html
* CNN
* CNN
* some text
There is a extra gap in list. So, I can't get output like this
* CNN
* CNN
* some text
only
* CNN
* CNN
* some text
This example demonstrates that org-mode isn't flexible in some cases. I can write lisp function, which sets this html attribute for all links in exported text, and add this feature to #+OPTIONS: or something. But I can't complicate more and more org-mode exporting system in this way, because there are some org-mode syntax limitations - it is simple.
If I have problems with org-publish like these, I think: may be I need something else for make-up except org-mode? )
You can include html into your template if you have couple of links, like this
My projects
- ##html:Example##
I using emacs to write some ejs files. I have set
(show-paren-mode t)
in my .emacs for highlighting parentheses. The ejs code looks like:
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
It seems that this mode doesn't work fine when editing ejs using html-mode. For example, a left '<' in '<%' matches the '}' on the right instead of matching a '%>'.
So my question is can I add '<%' as a code block delimiter to make show-paren-mode work fine in ejs files?
Any help is appreciated.
Have you really fully thought out how this this bracket highlighting might work?
You have have a naked starting delimiter "{" starting delimiter in between
"<%" and "%>".
This is equivalent to:
( { )
Does show-paren-mode highlight such code properly?
Editing mixed major-mode files (JS in HTMl), (Ruby in HTML), is hard in Emacs.
You can use this snippet to remove "<" and ">" as matching delimiters, which
alleviates your problem a little.
(eval-after-load "sgml-mode" '(progn
(modify-syntax-entry ?< "'" sgml-mode-syntax-table)
(modify-syntax-entry ?> "'" sgml-mode-syntax-table)))
But you need a multi-major-mode library to really get it to work, but I doubt
anyone's put in the work to make "EJS" work.