hexo-renderer-org icon indicating copy to clipboard operation
hexo-renderer-org copied to clipboard

Hexo renderer plugin for emacs org-mode

[[https://github.com/coldnew/hexo-renderer-org/raw/master/icon.png]]

[[https://hexo.io][Hexo]] renderer plugin for emacs [[https://orgmode.org/][org-mode]].

[[https://circleci.com/gh/coldnew/hexo-renderer-org][https://circleci.com/gh/coldnew/hexo-renderer-org.svg?style=svg]]

[[https://coldnew.github.io/hexo-org-example/2017/03/05/getting-started-with-hexo-and-org-mode/][Getting Started Guide]]

  • Table of Contents :TOC_2_gh:
  • [[#installation][Installation]]
  • [[#options][Options]]
    • [[#for-highlightjs-user][For highlight.js user]]
    • [[#for-htmlize-user][For htmlize user]]
    • [[#full-options-documentation][Full options documentation]]
  • [[#create-post][Create Post]]
  • [[#front-matters][Front-matters]]
  • [[#tutorials][Tutorials]]
  • [[#q--a][Q & A]]
    • [[#which-org-mode-version-do-you-use-][Which org-mode version do you use ?]]
    • [[#how-to-add-read-more-button-][How to add Read more button ?]]
    • [[#how-to-install-my-emacs-theme][How to install my emacs theme]]
    • [[#can-i-clean-cachedir-when-use-hexo-clean-][Can I clean cachedir when use hexo clean ?]]
    • [[#how-can-i-add-line-number-on-src-block-][How can I add line-number on src-block ?]]
    • [[#i-dont-want-to-use-emacs-daemon][I don't want to use emacs daemon]]
    • [[#can-i-drag-and-drop-image-to-org-files-][Can I drag and drop image to org files ?]]
  • Installation

    Switch to your hexo blog directory and run:

    #+BEGIN_SRC sh npm install https://github.com/coldnew/hexo-renderer-org#master --save #+END_SRC

    Then restart your hexo server.

  • Options

    You can configure this plugin in ~_config.yml~ according to the backend you want to use.

** For highlight.js user

If [[https://highlightjs.org/][highlight.js]] is enough for you, here's the minimal config:

#+BEGIN_SRC yaml org: emacs: 'emacs' emacsclient: 'emacsclient' #+END_SRC

** For htmlize user

If you want to use emacs's [[https://www.emacswiki.org/emacs/Htmlize][htmlize]] to syntax highlight your code block, you can use this config instead:

#+BEGIN_SRC yaml org: emacs: 'emacs' emacsclient: 'emacsclient' htmlize: true # <--- for htmlize user, this MUST set true theme: 'leuven' #+END_SRC

** Full options documentation

Some options may not uesed on above example, here's the doc:

| config | description | default value | |-------------+------------------------------------------+------------------------------------------------------------| | emacs | executable file of emacs | emacs | | emacsclient | executable file of emacsclient | emacsclient | | common | common org content you'll use | #+OPTIONS: toc:nil num:nil\n#+BIND: org-html-postamble nil | | cachedir | where cache file located | ./hexo-org-cache/ | | clean_cache | set true to clean cache by 'hexo clean' | false | | theme | emacs's theme you want to use | | | user_config | extra emacs config you want to load | | | htmlize | use emacs's htmlize to syntax highlight | false | | line_number | Enable line-number globally on src-block | false | | debug | Show more debug message | false | | daemonize | Enable/Disable use emacs server | true |

  • Create Post

    Create =source/_posts/foobar.org= with followin content:

    #+BEGIN_SRC org ,#+TITLE: Hello World ,#+DATE: <2017-03-05 Sun 08:52> ,#+LAYOUT: post ,#+CATEGORIES: org-mode ,#+TAGS: hexo, org-mode

    Welcome to [[https://github.com/coldnew/hexo-renderer-org][coldnew/hexo-renderer-org]]!

    ,#+HTML:

    You also can add some code block:

    ,#+BEGIN_SRC js console.log("hi"); ,#+END_SRC #+END_SRC

  • Front-matters

    [[https://orgmode.org/][org-mode]] has it's own way to describe the [[https://hexo.io/docs/front-matter.html][front-matter]].

    | Front-matter | org-mode | value | |--------------+--------------+------------------------------------------------------------| | layout | #+LAYOUT | post/page | | title | #+TITLE | string | | date | #+DATE | <2017-04-15 Sat 12:30>, use ~M-x org-time-stamp~ to insert | | updated | #+UPDATED | <2017-04-15 Sat 12:30>, use ~M-x org-time-stamp~ to insert | | comments | #+COMMENTS | yes/no | | tags | #+TAGS | tag1, tag2, tag3 | | categories | #+CATEGORIES | string |

    To insert date in org-mode, the default keybinding is =C-c .=, you can also use =C-u C-c .= instead.

  • Tutorials

    For more tutorials, please see:

    • [[https://coldnew.github.io/hexo-org-example/2017/03/05/getting-started-with-hexo-and-org-mode/][Getting started with hexo and org-mode]]
  • Q & A

** Which org-mode version do you use ?

This renderer ONLY support =org-mode 9.x= syntax, be careful there's some [[http://orgmode.org/Changes.html][conflict]] with org-mode 9.x and 8.x.

If you really want to use org-mode 8.x, here's the [[https://coldnew.github.io/hexo-org-example/2017/04/26/tips-for-org-mode-8-user/][guide.]]

** How to add Read more button ?

Place =#+HTML: = in where you would like to add a ~Read more~.

** How to install my emacs theme

If the emacs theme you want to use is not installed by default, you can setup the ~_config.yml~

For example, if we want to use [[https://github.com/kuanyui/moe-theme.el][moe-theme]] for your code block, we need to edit =_config.yml= like this:

#+BEGIN_SRC yaml org: # skip ... theme: 'moe-dark' user_config: './emacs/init.el' #+END_SRC

Then add following code to your =./emacs/init.el=.

#+BEGIN_SRC emacs-lisp ;; install moe-theme and use it (package-install 'moe-theme) (require 'moe-theme) #+END_SRC

** Can I clean cachedir when use hexo clean ?

If you want to make =hexo clean= work with [[https://github.com/coldnew/hexo-renderer-org][hexo-renderer-org]], you can setup your ~_config.yml~.

#+BEGIN_SRC yaml org: # skip ... clean_cache: true #+END_SRC

Note that the emacs-lisp cache in cachedir will be kept after =hexo clean=, you can manually remove it if you want to re-fetch all emacs-lisp plugin. ** How can I add line-number on src-block ?

You can add following to your =_config.yml= to make line-number display on your src-block globally:

#+BEGIN_SRC yaml org: # Make src-block has line-number (this won't make effect on example-block) line_number: true #+END_SRC

Or use org-mode's [[http://orgmode.org/manual/Literal-examples.html][standard method]] to add line-number manually:

#+BEGIN_SRC org ,#+BEGIN_SRC js -n console.log("This is line 1") ,#+END_SRC #+END_SRC ** I don't want to use emacs daemon

If you still want to use [[https://github.com/CodeFalling/hexo-renderer-org][CodeFalling/hexo-renderer-org]] method, which start emacs process to render post instead of using emacs daemon, you can switch to emacs process by setting =_config.xml=

#+BEGIN_SRC yaml org: # disable use emacs server by set 'false' daemonize: false #+END_SRC ** Can I drag and drop image to org files ?

Yes, first you need to install [[https://github.com/abo-abo/org-download][org-download]] to your emacs.

Then add following to =.dir-locals.el= at the top of your hexo project:

#+BEGIN_SRC emacs-lisp ((nil . ((eval . (progn

             ;; make drag-and-drop image save in the same name folder as org file
             ;; ex: `aa-bb-cc.org' then save image test.png to `aa-bb-cc/test.png'
             (defun my-org-download-method (link)
               (let ((filename
                      (file-name-nondirectory
                       (car (url-path-and-query
                             (url-generic-parse-url link)))))
                     (dirname (file-name-sans-extension buffer-file-name) ))
                 ;; if directory not exist, create it
                 (unless (file-exists-p dirname)
                   (make-directory dirname))
                 ;; return the path to save the download files
                 (expand-file-name filename dirname)))

             ;; only modify `org-download-method' in this project
             (setq-local org-download-method 'my-org-download-method)

             )))))

#+END_SRC