I want to visualize README.md files from a project in github, in my website.
What is the best way to do this? Like fetch the markdown code and process the mark down locally? Or there is a way to fetch the already processed markdown from github?
One possible solution is to use a javascript-based markdown parser, such as https://github.com/evilstreak/markdown-js.
That library can be loaded from the browser and can display the markdown. In this example (taken from the aforementioned site), you would need to fetch and insert the markdown in the output of your site:
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Insert proxied **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
Use Github API - Markdown on your javascript.
Here is a much better way to do it that seems to be more in line with the questions and it certainly suited my needs.
This implements a server-side, back-end processor that servers up HTML rendered from Markdown on the fly.
Here is an excerpt for PHP, but other languages are supported and documented in the link:
PHP
Download PHP Markdown (or PHP Markdown Extra) and PHP SmartyPants
from Michel Fortin.
Put markdown.php and smartypants.php somewhere in
PHP's include path (or in the same directory as render.php).
Add an alias in your Apache config:
Alias /markdown/ "/var/www/support/markdown/"
Add rewrite rules. This can be done in the .htaccess file for a specific folder, or in the global Apache config. Some common extensions are included, but you can adjust them to your needs. (You might want to process all text as Markdown by adding "txt".)
# display Markdown as HTML by default
RewriteEngine on
RewriteRule .+\.(markdown|mdown|md|mkd)$ /markdown/render.php
RewriteRule .+\.(markdown|mdown|md|mkd)\-text$ /markdown/render.php [L]
https://github.com/zhlicen/md.htm
An example of zeromd.js
Just serve the md.htm file and md files, and visit directly by url: /md.htm?src=README.md
Or directly use my github page, Example:
https://b.0-0.plus/blog/md.htm?src=https://raw.githubusercontent.com/microsoft/vscode/main/README.md
Related
I have just started using gulp.js and I want to know if there is a way to strip out comments from my HTML files. Of course, I don't want the comments removed from the original files, just those that will be in production. Say I have a file like this:
index.html // before gulp
<html>
<!-- Some comments -->
<!-- Some more comments -->
<div>
// some stuff
</div>
</html>
index.html // after gulp
<html>
<div>
// some stuff
</div>
</html>
Part of my question is that I'm not really sure how this should work. Am I suppose to put all of my gulped HTML files (with comments removed) in a separate directory, and only push that up to my server? I still want the comments to exist in my HTML files on my testing environment (and on my repo), just not on the files that go out to production. Any help in my understanding of how to do this would be much appreciated!
with gulp-htmlmin you can do it like this:
.pipe(htmlmin(
{
removeComments: true
}
))
see https://github.com/kangax/html-minifier#options-quick-reference for all available options.
I normally use gulp-htmlmin for removing comments among many other optimizations one can do on html files. I have a SRC folder containing the source html files with comments and a BUILD folder that contains all the optimized assets (js, css and html too) and I serve the files from the build folder when in production mode.
With https://www.npmjs.org/package/gulp-preprocess you can remove the comments.
So you would have one folder - as above - for pre gulp files and one for after it.
Then you could make 2 different tasks. One that only copies the html files and one which copies them and removes the comments.
Perhaps the simplest way is with gulp-decomment:
var gulp = require('gulp');
var decomment = require('gulp-decomment');
gulp.task('default', function () {
return gulp.src('input.js')
.pipe(decomment())
.pipe(gulp.dest('dest'));
});
It is possible to mix HTML with node.js commands?
I want to make my site like in PHP so:
<html>
<!-- Some HTML -->
<?php
echo "example";
?>
</html>
So, server makes all commands, which are included in HTML file and than returns pure HTML to show it in users browser. I need this, because I want to get data from MySQL database and then show it on my site.
In all tutorials I found only:
res.write("<Some html>");
And there is nothing about keeping html in separate files and add to them some server-side js.
Find a templating engine and build your application around that, because what you want is not possible.
For a list of compatible template engines, take a look here:
https://github.com/joyent/node/wiki/modules#wiki-templating
Your example using Express and EJS (which I use). Jade seems like overkill to me, but that's just my opinion.
// index.ejs (the html template)
<html>
<head></head>
<body>
<div><%= example %></div>
</body>
</html>
And in your node app:
app.get('/', function (req, res, next) {
res.render('index.ejs', {
layout: false,
locals: {
example: "Hello world!"
}
});
});
That's pretty much the basics of using EJS. I personally like it over Jade because the people I use to do up the html don't hand it to me in Jade format, and it's very similar to how I used to do php templating.
There is more you can do with the templates of course, you can put javascript in them to say, loop through an array returned by a database, include other .ejs files. You just need to dig into the docs and examples on the web.
Use the function res.write is enough.
You can generate some string with html syntax, like "<html>..</html>", then you put it into the res.write and you get response with a html file.
The point is how to generate the string with html syntax.
If we have a template file like this:
<html>
<body>
<h1>{{ "Hello" + " world!" }}</h1>
</body>
</html>
We want to get the "Hello world!" between <h1> and </h1>. So we can have the work done by:
read the template file with fs.readFile
use regular expression to get the content between {{ and }}
use eval to evaluate the content, and replace them.
After doing this, you can get the string with html syntax. and that is what most template engines(like ejs, jade) do, of course they have more complex works to do.
I hope that this can help you know more about template engine with node.js, and please forgive my poor English...
Have you tried a web application framework like express?
Check it out here!
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
Say I have a text file (test.txt) that contains only the following line:
<h1>Text text text text text</h1>
Is there any command that I can call the contents from this text file in an HTML document, so the contents in the text file imports where the call is made, every time the side shows?
Example: ?????"/test.txt"?????
I believe you mean to ask whether there exists a "command" in HTML which allows you to include a file.
In pure HTML by itself there does not, but the Apache server-side includes does provide such a directive:
<!--#include virtual="./test.txt" -->
You will need to enable SSI processing by your webserver. In Apache, you'd typically call your file .shtml or something like that.
What you're looking for is the concept call "Server Side Includes". Different servers will do this different ways, so you'll need to look at what your server provides.
Not with pure HTML, but you can with PHP (and almost every other server side language):
<?php include("test.txt"); ?>
Or you can do it in a roundabout way with JavaScript if the file is part of the website, you're actually running a web server, and you're not worrying about older browsers:
<script type="text/javascript">
var ajaxRq = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
ajaxRq.open("GET", "test.txt", false);
ajaxRq.send(null);
document.write(ajaxRq.responseText);
</script>
Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.
There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.
JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here
Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.
The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>
You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.
you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.
The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.
HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.
You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.