Emacs Company-Mode Continued : The First Thing To Do When Developing With Emacs

Installing Snippets From the Web

Other editors come with snippets preinstalled

You can find packages with snippets in Emacs, or convert the ones you find on the web to Yasnippets

Step 1: Find some snippets

Here are some emmet snippets directories:

https://github.com/emmetio/emmet/blob/master/snippets/css.json

https://github.com/emmetio/emmet/blob/master/snippets/html.json

There are other snippets all over the internet, for this method use .json files.

You can still find Atom snippets in .cson coffee script format on github and convert them to json easily.

You may want to read up on the Yasnippet formats created by João Távora.

Step 2: Produce some snippets

You can use a web server to parse json snippets to a web page, cut/paste them into an emacs org-mode file, then parse them into yasnippet snippet format.

Structure the json file like this:



{
"html": {
    "anchor-icon": {
    "prefix": "anchor-icon",
    "body": "<a class = \"${1:class}\" href=\"${2:path/file.html}\" target=\"${3:_blank|_self|_parent|_top|framename}\"> \n${4:LINK TEXT}\n<img src=\"${5:path/newtab.svg}\" alt=\"${6:(opens in new tab)}\">\n</a>",
    "description": "HTML - hyperlink with image inside",
    "scope": "text.html"
    },
    "anchor-simple": {
    "prefix": "anchor-simple",
    "body": "<a class = \"${1:class}\" href=\"${2:path/file.html}\" target=\"${3:_blank|_self|_parent|_top|framename}\">${4:LINK TEXT}</a>",
    "description": "HTML - hyperlink skip 
    (jumps to matching # element, position: absolute;top:-3em;)",
    "scope": "text.html"
    }
}
}

The “prefix” is the key that will be typed to produce this snippet

The “prefix” will also equal the org-mode heading for each snippet, since you’re using org-mode to edit any snippets.

The “body” key identifies the snippet value.

The “description” key will be the snippet name, in Yasnippet format.

You can use documentation to look up any HTML snippet attributes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://www.tutorialrepublic.com/html-reference/html5-tags.php

Step 3: Write JavaScript and HTML files to convert snippets to HTML

If you’re a node user, you can skip the webserver, and write directly to file using fs module.

Here are the operations:

1. use fetch, .GET_JSON (ajax), or convert json file to json object and use modules to import
2. parse the json object
3. use Object.keys(html) to loop through the object with Object.keys.forEach(key, index)
4. print data to Yasnippet format within HTML. You can use xmp tag or pre tag

And here’s the script:


"use strict";

//set variables at this scope (public here) for objects
let html = {};

let finalResult = new Array;

finalResult = "<div>";

// convert object to key's array
let loadResult =  function(){

const keys = Object.keys(html);

// iterate over object
keys.forEach((key, index) => { 

let result = `* ${key} </br># name: ${html[key]['description']}  </br>  # key: ${key} </br> # -- </br> <xmp> ${html[key]['body']} </xmp></br></br>`;
finalResult += result;
});

finalResult += "</div>";

//console.log(finalResult);
}//end loadResult

fetch("./htmlSnippets.json")
.then(function(resp){
return resp.json();
})

.then(function(data){

html = data.html;
loadResult();

let el = document.getElementById('output');

el.insertAdjacentHTML('beforeend', finalResult);

});

Here’s the HTML


<!DOCTYPE html>
<html lang = "en-US">

<head>
<meta charset = "UTF-8">
<title>Printing JSON Snippets To HTML</title>

<script type="text/javascript" src= "parse-json-html-to-html-snippets.js"></script>

<style>
body {
-webkit-font-smoothing: antialiased;
background-color:#f1f1f1;
color:black;
}
div > p {
margin: -5px 0px -5px 0px;
}
</style>
</head>
<body>


<div id = "output">
</div>


</body>
</html>

Step 4: Serve the HTML And JavaScript From a Local Server

Just start your server and go to the file.

Step 5: Copy the Served HTML to an Org File

You can add these lines to the meta data in the org-file.


#+TITLE: HTML SNIPPETS PARSED FROM JSON
#+OPTIONS: toc:nil title:nil

Step 6: Parse the Org File And Print Each Section to a Snippet File

If you included org-mode src blocks in your output, you can use org-babel-tangle.

You can also use a custom function to parse the snippets from the org-mode file into snippet files:



(defun export-yasnippets-from-org (&optional name)
  "Cut the subtree currently being edited and create a new file from it.
If called with the universal argument, prompt for new filename, 
otherwise use the subtree title."
  (interactive "P")
  (org-with-wide-buffer
   (save-mark-and-excursion
     ;; Loop through each headline.
     (org-map-entries
      (lambda ()
      (let ((filename (cond
                   (current-prefix-arg
                    (expand-file-name
                     (read-file-name "New file name: ")))
                   (t
                    (concat
                     (expand-file-name
                      (org-element-property :title
                                            (org-element-at-point))
                      default-directory)
                     "")))))
          ;; Set the active region.
            (forward-line 1)
            (set-mark (point))
            (outline-next-preface)
           (easy-kill)
          (find-file-noselect filename)
    (with-temp-file filename
      (org-mode)
      (yank))))))));end export yasnipets from org