I need help embedding a markdown, or *.md, file inside of an HTML index file. I have found that I can embed HTML inside of markdown, but not vice-versa. This would help to increase the speed of my editing because markdown format is extremely easy to use, (as I'm using it now) and I don't have to change the format of the rest of my site. I know that something like this is done to embed another HTML file with <iframe src="path/to/html>html-name</iframe>. I could also use javascript to interpret the md format on page load. Thanks ahead of time.
Here's the solution that I have long since forgotten about:
Forgetting that I asked this question and getting no answers, I created my own solution as an extension off of Chris Jeffrey's marked.js.
I call it tagdown.js.
Here it is: http://spikespaz.com/tagdownjs/
Just in case that link, or my domain, expires: https://spikespaz.github.io/tagdownjs/
Github: https://github.com/spikespaz/tagdownjs
This allows markdown to be added directly to the site, within a tag set with the class markdown. See the example on the site. There is no theme system in it, it's just the markdown parser.
Update
The project, TagdownJS, has been deleted from Github. The code for it seems so simple that it doesn't deserve its own repository.
Until it finds a new home, just go find Christopher Jeffery's Marked.js, and use this following code with it.
document.body.style.display = "none"; // Hide the page until it's finished rendering.
document.createElement("markdown");
var md_tags = document.getElementsByTagName("markdown"); // Returns array of all markdown tags.
for (var i = 0; i < md_tags.length; i++) { // Iterate through all the tags, and generate the HTML.
var md_text = md_tags[i].textContent.replace(/^[^\S\n]+/mg, ""); // I love regex, so shoot me.
var md_div = document.createElement("div"); // Make a new div to replace the fake tag.
md_div.id = "content";
md_div.innerHTML = marked(md_text);
md_tags[i].parentNode.appendChild(md_div); // Add remove the old raw markdown.
md_tags[i].parentNode.removeChild(md_tags[i]);
}
document.body.style.display = ""; // Show the rendered page.
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
Live demo: https://b.0-0.plus/blog/md.htm?src=https://raw.githubusercontent.com/microsoft/vscode/main/README.md
Basicly, you need to interpret MD format into HTML. Javascript is an option.
Take below as an example. (Though Windows, independent of OS)
Let's say a folder mytest looks like,
D:\mytest>dir
Volume in drive D is Data
Volume Serial Number is ABCD-EFGH
Directory of D:\mytest
12/03/2020 10:10 AM <DIR> .
12/03/2020 10:10 AM <DIR> ..
12/03/2020 10:09 AM 7,973 example-image.jpg
12/03/2020 10:12 AM 4,619 md_html.html
12/03/2020 10:00 AM 2,299 md_html.min.js
3 File(s) 14,891 bytes
2 Dir(s) 778,204,147,712 bytes free
D:\mytest>
Here is the html content,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-light.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/github-markdown-css/2.8.0/github-markdown.min.css" />
<title>Marked In HTML</title>
</head>
<body>
<template type="markdown">
Try Marked In HTML ！
====
</template>
</body>
<script src="https://cdn.bootcss.com/marked/0.3.6/marked.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js" charset="utf-8"></script>
<script src="md_html.min.js" charset="utf-8"></script>
<script type="text/javascript">
markedInHtml.init()
</script>
</html>
And the js,
!function(n){function t(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return n[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var e={};t.m=n,t.c=e,t.i=function(n){return n},t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=1)}([function(n,t,e){"use strict";function r(n){return n&&n.__esModule?n:{default:n}}function i(n){if(Array.isArray(n)){for(var t=0,e=Array(n.length);t<n.length;t++)e[t]=n[t];return e}return Array.from(n)}function a(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),t.MarkedInHtml=void 0;var o=function(){function n(n,t){for(var e=0;e<t.length;e++){var r=t[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}return function(t,e,r){return e&&n(t.prototype,e),r&&n(t,r),t}}(),u=e(3),l=r(u),s=e(2),c=r(s);t.MarkedInHtml=function(){function n(){a(this,n),l.default.setOptions(this.options||{gfm:!0,tables:!0,breaks:!1,pedantic:!1,sanitize:!1,smartLists:!0,smartypants:!1,highlight:function(n,t,e){return c.default.highlightAuto(n).value}})}return o(n,[{key:"init",value:function(){var n=this;document.querySelectorAll('template[type="markdown"]').forEach(function(t){var e=document.createElement("div");e.innerHTML=n.parse(t),e.id=t.id,e.classList.add(["markdown-body"].concat(i(Array.from(t.classList)))),e.dataset.markdown=n.intelligentProcessingIndent(t),t.parentElement.replaceChild(e,t)})}},{key:"parse",value:function(n){return(0,l.default)(this.intelligentProcessingIndent(n))}},{key:"intelligentProcessingIndent",value:function(n){var t=n.innerHTML.split("\n");t.length&&/^\s*$/.test(t[0])&&t.shift(),t.length&&/^\s*$/.test(t[t.length-1])&&t.pop();var e=Math.min.apply(Math,i(t.map(function(n){return n.length?n.match(/^\s*/)[0].length:1/0})));return t.map(function(n){return n.substring(e)}).join("\n")}}]),n}()},function(n,t,e){"use strict";var r=e(0);window&&(window.markedInHtml=new r.MarkedInHtml)},function(n,t){n.exports=hljs},function(n,t){n.exports=marked}]);
And the jpg,
After open the html, you should be able to convert
Try Marked In HTML ！
====
into
You can try to replace the template, some effect may not be able to present. For example, use quick markdown example by John Gabriele, the equation are not shown well.
Someone, like 🎅 would suggest to use snippet, yet I failed to get that ❄️ work, parsing not successful. 🥺
Related
The current solutions I know of for displaying JSCad Designs:
https://www.openjscad.org/
https://danmarshall.github.io/jscad-gallery/
https://risacher.org/OpenJsCad
https://johnwebbcole.gitlab.io/vesa-shelf/
https://joostn.github.io/OpenJsCad/
https://github.com/jscad/OpenJSCAD.org/blob/V2/packages/web/demo.html
all need quite some infrastructure to work.
https://www.openjscad.org/
is based on node The Userguide
https://www.openjscad.org/dokuwiki/doku.php?id=user_guide_website
states
The website can be integrated into an existing website.
But does not say how.
https://danmarshall.github.io/jscad-gallery/
Has it's sources at https://github.com/danmarshall/jscad-gallery. These were last modified in 2017 (some 2 years ago as of this post).
It use some dozen javascript files and jekyll to fulfill it's purpose.
Example: https://danmarshall.github.io/jscad-gallery/s-hook
The source code of a page is quite small:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSCAD Gallery s-hook</title>
<link rel="stylesheet" type="text/css" href="/jscad-gallery/site.css"/>
<script src='/jscad-gallery/browser_modules/#jscad/csg/0.3.7.js' type="text/javascript"></script>
<script src='/jscad-gallery/js/jscad-viewer.js' type="text/javascript"></script>
<script src='/jscad-gallery/js/ui.js' type="text/javascript"></script></head>
<body>
<h1>s-hook</h1>
<p>a simple S-hook design</p>
<div id="detail-viewer"></div>
<div id="inputs"></div>
<button onclick="detailView.export('stl', document.getElementById('download'))">Generate STL</button>
<div id="download"></div>
<script>
var design = {
title: "s-hook",
updated: null,
author: "Joost Nieuwenhuijse",
version: "1.0.0",
dependencies: [{"#jscad/scad-api":"^0.4.2"}],
image: "/browser_modules/s-hook/thumbnail.png",
camera: {"angle":{"x":-60,"y":0,"z":-45},"position":{"x":0,"y":0,"z":116}}
};
var detailView = new JscadGallery.DesignView();
detailView.load(document.getElementById('detail-viewer'), design, document.getElementById('inputs'));
</script>
<footer>
Jscad-gallery on GitHub
</footer>
</body>
</html>
I am looking for a (hopefully) simple solution that can be embedded in Mediawiki. For a start a plain html page with a bit of javascript would do for me.
see also:
https://openjscad.nodebb.com/topic/98/displaying-jscad-designs-in-media-wiki-or-plain-html-for-a-start
For a start I created http://wiki.bitplan.com/index.php/ParametricLampShade by simply copying the html from https://risacher.org/OpenJsCad/lampshadedemo.html.
I put the files:
csg.js
lightgl.js
openjscad.js
into the folder extensions/OpenJsCad.
With this simplistic approach i get the error:
Error in line 466: NetworkError: Failed to load worker script at http://wiki.bitplan.com/index.php/csg.js (nsresult = 0x804b001d)
The reasons seems to be in openjscad.js:
// callback: should be function(error, csg)
OpenJsCad.parseJsCadScriptASync = function(script, mainParameters, options, callback) {
var baselibraries = [
"csg.js",
"openjscad.js"
];
var baseurl = document.location.href.replace(/\?.*$/, '');
var openjscadurl = baseurl;
if (options['openJsCadPath'] != null) {
openjscadurl = OpenJsCad.makeAbsoluteUrl( options['openJsCadPath'], baseurl );
}
var libraries = [];
if (options['libraries'] != null) {
libraries = options['libraries'];
}
...
}
the openjscadurl is taken from the basepath which for Mediawiki is ../index.php.
How could I fix this?
What is the minimum set of javascript files needed and would be the proper versions of these files?
Changing the baseurl calculation to:
//alert(document.location);
var baseurl = document.location.href.replace(/index.php\/.*$/, 'extensions/OpenJsCad/');
//alert(baseurl);
fixed the issue.
See http://wiki.bitplan.com/index.php/ParametricLampShade for the result.
As a proof of concept
http://wiki.bitplan.com/index.php/Template:Jscad now has a Mediawiki Template.
I'd still like to learn about the javascript files and versions that should be used. Since the current approach use some outdated javascript files and can't even render the OpenJSCAD logo code from http://openjscad.org
The 1.10.0 version of https://www.npmjs.com/package/#jscad/web allows you to host a JsCad file with a single package. https://github.com/jscad/OpenJSCAD.org/pull/413
While this doesn't directly help you, I have a Vue component that allows you to show a JsCad file at https://gitlab.com/johnwebbcole/vue-openjscad
You may be able to use that to update your Mediawiki plugin.
J
I've been following this article (https://dev.to/programliftoff/create-a-basic-webpage-with-css-and-javascript--104i) to get started on building an interactive webpage, but I can't get the JS and CSS to work.
I'm working in Sublime, and I followed this tutorial (https://www.youtube.com/watch?v=oqD5C77Tk3I&feature=youtu.be) to run it through http rather than the file system.
I've double checked the folder paths fifty times (they're just saved on my desktop as 'scripts' and 'styles' in the same folder as my index.html doc), and tried different variations of dots at the start of the paths and slashes both ways, but the JS and CSS just won't load. I've also moved the 'link rel' and 'scripts async src' lines between the head and body tags, but it doesn't seem to make a difference.
My html doc looks like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link rel=“stylesheet” type="text/css" href=“../styles/styles.css” />
<script async src="./scripts/index.js"></script>
</head>
<body>
<h1>Hello, World</h1>
<h4 id=‘date’></h4>
<img src="images/IMG_4945.jpg" alt="My test image">
</html>
My JS doc looks like this,
document.getElementById('date').innerHTML = new Date().toDateString();
My CSS doc looks like this,
body {
text-align: center;
background-color: #ffe6e6;
}
Hard to tell without looking at your file structure, but let's assume you have it like this:
|-Project
|-----css
|---------style.css
|-----js
|---------main.js
|-----index.html
in your index.html you should be calling your css like this:
<link rel="stylesheet" href="/css/style.css" />
in UNIX based OS's (and localhost Windows) / equates to document root. It's best to do this as you're guranteed to always call that file no matter where you copy + paste code to.
Note: In Windows servers / doesn't work - not sure why. Windows just sucks I guess.
Remove the async keyword from your script element. That isn't an asynchronous script and it modifies the DOM before it's ready.
Use jQuery $(document).ready(function() {}); or JS window.onload = function() {}; and remove that async attribute so your script is run in synch with the DOM.
In other words, you cannot edit the document before it has been created. But you are trying to do that with an async and no check for if the document is ready.
../ means parent folder. So:
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<script src="scripts/index.js"></script>
Double quotation marks in your code are valid? “ -> " Pls check it.
I have made some changes on a live website (I know, not the best practice, but I was told to) and I'm having issues with caching. Every time I make a change to our CSS (SASS actually), I have to hit CTRL F5 to see the changes. That's not a problem for me, but the users are starting to complain of a broken website and many of them don't know how to clear the cache or use CTRL F5.
I have tried adding the following code, but it's not working.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
I have also tried adding this script:
<script type="text/javascript">
$(document).ready(function(){
$('img').each(function(){
var date = new Date;
// add the current unix timestamp in microseconds to the the image src as a query string
this.src = this.src + '?' + date.getTime();
});
});
</script>
I don't know Javascript though, so I don't know how to use it properly. I have searched for answers and other people have said these things work for them, but they simply are NOT working for me. I am a designer and front-end developer, so PHP and Javascript are a bit beyond me.
Finally, I've also read about using version tags - ?v=x.x, but my issue is the site was coded by other developers and I have no clue how they are linking to our stylesheet (using SASS).
Any help would be great appreciated!
Thanks!
Ideally you'd use PHP to check the file's filemtime() (the time it was last modified), and use a technique called versioning to indicate it's a changed file, and to not load it from cache.
The resulting HTML would look something similar to this:
<link href="/your/css/file.css?ver=<?php echo filemtime('/your/css/file.css'); ?>" rel="stylesheet" type="text/css"/>
Call the external CSS file adding a random code as GET variable in PHP.
Something like this:
<script src="yourfileUpdated.css?<?php echo rand() ?> rel="stylesheet" type="text/css" />
Styles are added with wp_enqueue_style function. Search your theme, it is probably in functions.php.
Then use like this:
wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);
Read more here https://wordimpress.com/wordpress-css-and-js-cache-busting/.
Okay, I've tried to figure this one out on my own and I just can't. I'm making a loot logging web app for a game I play online. The web app is hosted on pythonanywhere. It's coded in ReactJS in the main html file entirely so no databases or anything like that. I store loot tables for different monsters in an array like
var monsterName = [
["item 1 name", [#,#,#], id],
["item 2 name", [#], id]
];
Etc... The loot arrays are a lot longer than that but you get the idea. I had the code working properly to use these arrays for grabbing item names and image paths and all. I figured if I was going to add more monsters now that my code worked, I should relocate these arrays to a separate file. I called this file 'droptables.js'. I saved it in the same directory as the main html file so it would be easy to find it. I then named an array in the main html script tags (where all of the Reactjs code is) like this
lootTable = monsterName;
I tried and tried to use various methods to export it from the .js file and import it into the html file, and none work.
import monsterName from './droptables.js';
coupled with
exports.monsterName = [array info]
I tried
module.exports = monsterName;
export default monsterName;
I tried importing in the header of the html instead like
<script src="./droptables.js" />
I haven't listed every attempt here because I tried several different paths too thinking maybe that was it
'/droptables.js'
'droptables.js'
'droptables'
'/templates/droptables.js'
You get the idea. Hopefully someone out there can help me figure this out. It's one of the last roadblocks I have before my app is complete at least in the base functionality sense and it's driving me crazy that I can't get this solved. Thank you for any help!
EDIT: I added the beginning of my HTML/React sheet below so you can see what it looks like and where I'm trying to import.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LootLogger Webapp 1.1</title>
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<script src="react url"></script>
<script src="react url"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
import abyssalDemon from './droptables.js';
var monsterLoot = abyssalDemon;
var LootEntry = React.createClass({
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
As you can see, abyssalDemon is what I named my array in the other javascript file, monsterLoot is the array I use in the actual code here on the html sheet, so I need monsterLoot to equal abyssalDemon from the other js file for everything to work. LootEntry is just the first React component I make, it's an entry in the list of loots the user has logged.
Okay, I figured out how to do it a different way without using required and instead using Jquery. I modified my original html document like the following.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LootLogger Webapp 1.1</title>
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<script src="react url"></script>
<script src="react url"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.34/browser.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type='text/javascript' src='/static/javascript/droptables.js'>
</script>
<script type="text/javascript">
var monsterLoot = new Array();
$(document).ready(function () {
monsterLoot = AbyssalDemon;
});
</script>
<script type="text/babel">
var LootEntry = React.createClass({
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
I added the import of Jquery in the header tags. I also added a tag in my body to reference my droptables.js file. Finally, I added a the Jquery function to make my monsterLoot array equal to the AbyssalDemon array from the external js file. I did this in a document ready function because I believe part of my problem was my page was trying to generate my buttons before the monsterLoot array had been imported so it was throwing an error because the array was undefined. At least that's my guess. It works now though!
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">