Suppose I have a README.md file in a github repository. I am then making a website all about this repository that I will host using gh-pages.
What I want is to have a section of my index.html file that gets its content from my README.md file. This way, only one file needs to be updated.
I imagine that the markdown file will first need to be converted to html, and that html can then be put into another html file.
I have looked into HTML5 Imports, but they are only currently supported in Chrome. Using a separate .js file with document.write() could be useful, but is there a simple, clean way?
I am using <zero-md> web component.
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<zero-md src="README.md"></zero-md>
My complete answer using Node.js
1. First install the marked markdown converter:
$ npm install --save-dev marked
2. Then in a new file called generateReadMe.js, compile the markdown to HTML and write it to a new README.html file:
var marked = require('marked');
var fs = require('fs');
var readMe = fs.readFileSync('README.md', 'utf-8');
var markdownReadMe = marked(readMe);
fs.writeFileSync('./site/README.html', markdownReadMe);
3. Then inside the index.html where the README.md content is wanted, add an <object> tag:
<object data="README.html" type="text/html"></object>
4. Then run this on the command line to make it happen:
$ node path/to/generateReadMe.js
The whole process was pretty simple and painless. I added the whole thing to my npm start script. Now any time I make a change to my README.md file, the changes will register on my gh-pages website.
You could use a markdown parser such as https://github.com/markdown-it/markdown-it to convert the markdown to html.
You could either convert the markdown on the server and merge it into the HTML delivered to the client, or use it to load the markdown in the browser and convert it there.
To convert markdown to html, you can use a conversion library or a command tool. For an example using the Ruby language, visit: https://github.com/github/markup.
Try searching for an appropriate conversion library or command tool for your implementation by visiting: https://www.npmjs.com/search?q=markup. The accepted answer above is an example using the NPM package manager for Node.js.
Related
I have a project consisting of a TypeScript file and an HTML page. Currently, I am loading several libraries that the TypeScript file requires in the HTML Page by including them in tags, i.e. <script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>.
Since I would like to use the TypeScript code in other web pages without having to copy a bunch of script tags, is there a way I could load the libraries in the TypeScript file instead of in the HTML file? I tried searching it up and saw some options (for example, import and export) but just using import {Tabulator} from 'tabulator-tables'; obviously didn't work, and I'm somewhat lost.
Because you stated that you're not using any bundler, and that you don't want to use a UMD module in a <script> element, you'll need a version of tabulator-tables that is in the ES module format. It looks like the package provides one at https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.es2015.min.js. You can download that file locally to your project and import from it in your script like this:
import Tabulator from './relative/path/to/where/you/saved/tabulator.es2015.min.js';
You'll need to publish that downloaded module alongside your HTML file, JS file, etc. wherever you're serving the web page, and make sure that you set your own script's type attribute to module in the HTML.
Similar to this I want inject the js files that are external to the html.
Background to my issue -- I am using cobertura for code coverage generation for my Angular6 application. In my vsts build I am publishing the code coverage results, but when stepping through the file links when .js files need to be fired I get errors in the browser:
Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
I figured the best solution would be to execute a script to inject the javascript code directly into the html rather than linking to it externally.
so for example say the html is like this:
<html>
<script src="code.js"></script>
...
</html>
then after running a script like injector.js like so: node ./injector.js
the html will become:
<html>
<script>
function hello() {
console.log('hello');
}
</script>
</html>
How can you do this?
or is there a better solution to this problem?
Since your development is entirely based on NodeJs.
You can simply write a nodejs script
Use Glob module to fetch all HTML files using pattern from the coverage folder
loop through each generated report HTML and inline the CSS and scripts.
save it
Then publish your code coverage report as artifacts.
Following NPM module does exactly does the inlining job with few optimizations
https://www.npmjs.com/package/vsts-coverage-styles
Disclaimer:
I wrote the above mentioned simple reusable npm package.
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.
I'm building an Express.js Node app and using Jade templates. Jade provides a :markdown filter which enables embedding Markdown code inside Jade:
h1 This is Jade
:markdown
## And this is Markdown
h3 Back in Jade
(Note: In order to use this filter you have to npm install a Markdown engine, e.g. npm install marked --save. You don't have to require() this module within your Express app, but it has to be installed.)
So, embedding Markdown within Jade works fine. However, I would like to keep my Markdown in separate files and include them in Jade templates dynamically. I've tried this and it does not work:
:markdown
include ../path/to/markdown/file.md
The include command is treated as source code instead of being interpreted as a command. Is it possible to inject Markdown from external files within the :markdown filter?
Please don't provide workarounds! I know how to work around this issue. I want to know if the :markdown filter is compatible with external Markdown files.
You can include markdown files using the :md filter modifier.
eg.
html
body
include:md ../path/to/markdown/file.md
Language Reference: https://pugjs.org/language/includes.html#including-filtered-text
the :md modifier does not work for me either, but this works:
html
body
// works:
include file.md
//- does not work:
include:markdown file.md
include:md file.md
I am using docpad with the HTML5 Boilerplate template.
You also should consider the problem of no auto-generation of including *.html.jade files of such includes:
How to auto-generate html from jade file when only included markdown file has changed in livereload development environment?
First, run this command:
npm install marked --save
Then, do this:
include:md ../path/to/markdown/file.md
I've been looking everywhere for answer to my questions last few hours and couldn't find anything, so i decided to ask.
I followed installation instruction in docs of Dajaxice, got everything setup exacly the same, but unfortunetely my Dajax.core.js file is not getting parsed, so when i click on the javascript link in page html source it still contains template tags. I included the Dajaxice finder in staticfiles_finder(actually i ve got everything setup like in the ins instruction.
I am using django 1.4.1 develop server at the moment for testing and the latest Dajaxice version which is 0.9, is that make any difference ?
Does the order of vars in settings.py matters ?
What are the main reasons the Javascript files are not getting parsed, and actually when they should be parsed ?
Please help me as i really would love to use this app but just can't get it to work.
Thanks in advance.
I advice you to check STATICFILES_FINDERS settings and other settings related to django.contrib.staticfiles app. Dajaxice uses a hook in this app to generate dajaxice.core file.
When you use debug server this static file is generated on the fly, on production environment the file will be generated when you run collectstatic command.
In your case it looks like the dajaxice.core.js file is founded by another static finder or served in any other way.
To check this please run the following command
python manage.py findstatic dajaxice/dajaxice.core.js
The output should look like
Found 'dajaxice/dajaxice.core.js' here:
/tmp/tmp9nzeEd
The filename in tmp dir will be different
Also 2 pitfalls with collect static app:
When you update your ajax.py file to include new dajaxice views you have to run collectstatic again
The file is generated in /tmp/ folder. So if you use -l key to generate links instead of copying files make sure that you will not remove this file by accident.