Giter Site home page Giter Site logo

hexo-renderer-org's Introduction

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

Hexo renderer plugin for emacs org-mode.

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

Getting Started Guide

Table of Contents

Installation

Switch to your hexo blog directory and run:

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

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 highlight.js is enough for you, here’s the minimal config:

org:
  emacs: 'emacs'
  emacsclient: 'emacsclient'

For htmlize user

If you want to use emacs’s htmlize to syntax highlight your code block, you can use this config instead:

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

Full options documentation

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

configdescriptiondefault value
emacsexecutable file of emacsemacs
emacsclientexecutable file of emacsclientemacsclient
commoncommon org content you’ll use#+OPTIONS: toc:nil num:nil\n#+BIND: org-html-postamble nil
cachedirwhere cache file located./hexo-org-cache/
clean_cacheset true to clean cache by ‘hexo clean’false
themeemacs’s theme you want to use
user_configextra emacs config you want to load
htmlizeuse emacs’s htmlize to syntax highlightfalse
line_numberEnable line-number globally on src-blockfalse
debugShow more debug messagefalse
daemonizeEnable/Disable use emacs servertrue

Create Post

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

#+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: <!-- more -->

You also can add some code block:

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

Front-matters

org-mode has it’s own way to describe the front-matter.

Front-matterorg-modevalue
layout#+LAYOUTpost/page
title#+TITLEstring
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#+COMMENTSyes/no
tags#+TAGStag1, tag2, tag3
categories#+CATEGORIESstring

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:

Q & A

Which org-mode version do you use ?

This renderer ONLY support org-mode 9.x syntax, be careful there’s some conflict with org-mode 9.x and 8.x.

If you really want to use org-mode 8.x, here’s the guide.

How to add Read more button ?

Place #+HTML: <!-- more --> 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 moe-theme for your code block, we need to edit _config.yml like this:

org:
  # skip ...
  theme: 'moe-dark'
  user_config: './emacs/init.el'

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

;; install moe-theme and use it
(package-install 'moe-theme)
(require 'moe-theme)

Can I clean cachedir when use hexo clean ?

If you want to make hexo clean work with hexo-renderer-org, you can setup your _config.yml.

org:
  # skip ...
  clean_cache: true

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:

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

Or use org-mode’s standard method to add line-number manually:

#+BEGIN_SRC js -n
   console.log("This is line 1")
#+END_SRC

I don’t want to use emacs daemon

If you still want to use 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

org:
  # disable use emacs server by set 'false'
  daemonize: false

Can I drag and drop image to org files ?

Yes, first you need to install org-download to your emacs.

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

((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-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)

               )))))

hexo-renderer-org's People

Contributors

coldnew avatar cy20lin avatar driftcrow avatar xcodebuild avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.