How do I format a large amount of text into html automatically?

Question

I will be publishing a blog in my website. Frequently I will write fairly long entries in a word processor. My site has custom html and css tags -- for example, -div class="blog_post_para"-.

I will dump text into a .txt document (which I save as .html when I'm finished), but adding the tags manually to each paragraph and header will be slow and tedious.

Is there any tool available that can automatically format the paragraphs with "div" tags at the start and /div at the end. The same would be true for paragraph p and /p> tags.

I don't want to use an IDE like Dreamweaver. I just want to format code in a .txt document or a text document saved as .html.

I can output the word processor document to html, but all the styles are inline, and they can't match the custom styles on my site because the word processor doesn't know their names. Default styles won't do -- I have my own custom css classes.

It would also have to replace apostrophes with [amp]#39; and dashes with —

I was going to do it programmatically (in Python), which is probably the most custom solution, but it will take some time.

Is there such a tool?

Answer 1

You may want to look into Jekyll, it's a static site generator and I think it's pretty much designed for what you're asking, particularly since you're publishing a blog.

As a bonus, it integrates nicely with Github Pages, so you can get free hosting.

https://help.github.com/en/articles/using-jekyll-as-a-static-site-generator-with-github-pages

Answer 2

Another JavaScript solution (click 'ok'):

JsFiddle demo

(function(){

let inp = document.getElementById('input');
let res = document.getElementById('result');
let ok  = document.getElementById('ok');
ok.addEventListener('click', function(){
  let open  = document.getElementById('open').value;
  let close = document.getElementById('close').value;
  let str = inp.value;

  // The main magic is going here:  .replace('something', 'with smth else')
  str = str.replace(/^(.)/gm, open + '$1')  //Match any non-empty (.) new line ^
           .replace(/(.)$/gm, '$1' + close);  // Any non-empty (.) line ending $.

  res.value = str;
});

})();

*{margin: 0;}
#input, #result {
  display: block;
  border: 3px solid orange;
  width: 500px; height: 80px;
  margin: 5px; outline: none;
}
#ok {
  padding: 2px 50px;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
}
#open, #close {
  width: 200px; padding: 3px;
  border: 3px solid orange;
  margin: 5px; outline: none;
}

<input id="open" placeholder="Beginning tag..." value="<div>">
<input id="close" placeholder="End" value="</div>">
<textarea id="input" placeholder="Input Text...">Test
Test

Test</textarea>
<button id="ok">OK</button>
<textarea id="result"></textarea>

To freely modify this example and replace any text parts, you have to know regular expressions. Would be helpful:

regex101.com
regex cheat sheet

Answer 3

Prettydiff is good for big files. It also prettifies the embedded CSS and JavaScript. Here is a bad quality gif showing a 25Mb html file prettified with prettydiff:

Prettier is very good as well. I don't know whether it handles big files.