I am facing a problem about how to create HTML code examples with Prism, either with pure JS or VueJS.
I need to get something like Bootstrap documentation, with several lines of HTML code displayed, indented, and highlighted.
It works when I put the HTML code directly between the pre/code tags, replacing the < with <.
But I want something more automatic, in which you write a line of code, for example to create a button, and under it, you have the code displayed.
So I am looking for a way to copy this line of code between the pre/code tags.
The problem is that either through the data objects of Vuejs (putting it as a string), or with the appendChild or innerHTML DOM methods, it doesn't works.
With VueJS I get a highlighted line of code but I can't have a multi-line example.
With appendChild and innerHTML, is displayed only the content of the element, for example the text between the button or div tags.
What I need is a way to display all the code, from < of the first tag to > of the last one.
How can I achieve this? Is it possible or is HTML impossible to easily display in the browser?
Here is the easy JS example I am working on.
If you uncomment the line between code tags, you will have the working example, the result I want to get from a more automatic way, just writing once the line of code, and then copying it.
Thanks
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>About</div>
<pre>
<code id="hh">
<!-- <div class="div" data-modifiers='["div--small", "div--big"]'>About</div>-->
</code>
</pre>
<script>
const example = document.getElementById('gg');
const toDisplay = document.getElementById('hh');
// toDisplay.appendChild(example);
hh.innerHTML = gg.innerHTML;
</script>
</body>
</html>
I finally found the solution using only pure JS (no framework).
I share the solution if one day someone needs it.
You can add Prism to get a highlighted displayed code.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>
<p>fff</p>
About
</div>
<pre>
<code id="hh" class="language-html">
</code>
</pre>
<script>
const example = document.getElementById('gg').outerHTML;
const toDisplay = document.getElementById('hh');
const regex = /</gi;
renamed = example.replace(regex , '<');
hh.innerHTML = renamed;
</script>
</body>
</html>
Related
I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.
I want to create some variables in javascript and then display them in my page which is created in Wordpress.
Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):
<script type="javascript">
document.getElementById('test').innerHTML = 'hello';
</script>
And then on the text block I want to display my variable to be displayed I should add this code:
<body>
<p id="test"></p>
</body>
However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.
If I try the following it works:
<body>
<p>hello</p>
</body>
So I guess my problem is that I'm not setting the variable properly.
Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.
Thank you in advance.
Your problem is the type of which you're using here:
<script type="javascript">
I noticed this whilst constructing an example of this problem.
javascript is not a correct mime type.
It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml
Working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="test">
This shouldn't show up
</p>
<script type="text/javascript">
console.log("####### JAVASCRIPT IS RUNNING ######")
document.getElementById('test').innerHTML = 'hello';
</script>
</body>
</html>
I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});
I'm looking for a Javascript equivalent of a technique I've been using in PHP. That is, to place even the most basic page setup:
<!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">
...in a php file like 'doc_start.php' and then start every page in my site with...
<?php require_once('/path/to/doc_start.php); ?>
Now I need to begin a project that's strictly HTML and JS (no PHP) and want a similar way to avoid duplicating basic, common HTML elements. Obviously, I want to do more than this very basic stuff, like import JQuery in every page, link to a common stylesheet, etc. Again, all easy in PHP, but I'm still kind of a newbie in JS.
I've read about HTML5 includes, but can't seem to find anything that addresses what I want to do
In order to import other pages into your current document, you need to use a link tag.
For example....
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
This will allow you to reference other html, css or javascript documents into your page without copying and pasting the same code within each page.
https://www.w3schools.com/html/html_links.asp
Javascript and PHP are different languages for very different purposes. But assuming you have some element you don't want to repeat some elements one solution is the following:
Save the HTML elements that you don't want to keep repeating as a string. Then use the .innerHTML property to add elements.
The .innerHTML property stores the mark up of an element as a string.
For example, if we have the following <div>:
<div class="example"> <br> Hello there this is a test! </div>
...and we use .innerHTML:
console.log(document.querySelector(".example").innerHTML);
It will output "<br> Hello there this is a test!".
We can add to the .innerHTML using the += operator. So if you want to add something inside the body it's as simple as:
var something = "some HTML";
document.body.innerHTML += something;
Hope this was what you were looking for!
I'm currently facing a situation where I get a whole HTML document as part of a JSON object and would like to let the user edit it in a WYSIWG fashion. My current approach is to use TinyMCE but I'd be open for other suggestion as well.
The problem I'm facing using TinyMCE is that that part of the document is being lost if a user edits it. Would anyone know a solution to work around this?
The below example contains a string with a simple HTML document that is being displayed within the textarea. After the documents loads, you will see that the area contains the whole document. If you continue to click on the "Init" button, it will initialize TinyMCE and you will find that the markup is being read and that you can even change it. The problem is that, regardless of whenever you press save or view the source using the options in "tools", only the body part of the document remains.
The document is actually a out of office message from exchange. The original code is a bit more complex but this is a minimal working example I came up with.
So would anyone happen to know how I could enable a user to still be able to do some formatting in a WYSIWG fashion while also preserving the original HTML markup that is being loaded? That primarily means including the html, head etc. tags.
<!DOCTYPE html>
<html>
<head>
<script src="http://cloud.tinymce.com/stable/tinymce.min.js"></script>
</head>
<body>
<button onclick="tinymce.init({ selector:'textarea', plugins:'code' })">Init</button>
<button onclick="tinyMCE.editors[0].save()">Save</button>
<button onclick="tinyMCE.editors[0].remove()">Remove</button><br />
<textarea id="editorArea" style="width: 100%;" rows="15"></textarea>
<script>
var htmlElements = `
<html xmlns:o="urn:schema-microsoft-com:office:office">
<head>
<style>
body{font-family: sans-serif; font-size: 55pt;}
</style>
</head>
<body>
<div>
<span style="font-size: 7pt">Here is some text.</span>
</div>
</body>
</html>`;
document.getElementById("editorArea").innerHTML = htmlElements;
</script>
</body>
</html>
The fullpage plugins allows someone to work with the entire HTML document when looking at the code view of the content:
https://www.tinymce.com/docs/plugins/fullpage/
When you then save the content you should get back the entire document.
I don't know whether this is the best approach or not. But this is what i did in one of my project. My use case was to render markdown text or html on browser and it should be editable. I used showdown.js in this case, you are free to choose any library.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
</script>
</head>
<body>
<br />
<div id="editorArea" contentEditable="true" style="width: 100%;"></div>
<script>
var htmlElements = `<html>
<head>
<style>
body{font-family: sans-serif; font-size: 55pt;}
</style>
</head>
<body>
<div>
<span style="font-size: 7pt; color: #dd0000;">Here is some editable text.</span>
</div>
</body>
</html>`;
var converter = new showdown.Converter(),
text = htmlElements,
output = converter.makeHtml(text);
document.getElementById("editorArea").innerHTML = output;
</script>
</body>
</html>
I have the following basic code to attempt changing the value of the textarea element. Using standard HTML works fine; however, using Google Apps Script, it will not work. There will be more to the program which will include additional lines via \n so a standard input tag can't be used - this is just the basic piece in which I need to populate text within the element. Does anyone know if this is possible with GAS? Note, only wanting to use the HTML file, not pure GAS JavaScript.
<!DOCTYPE html>
<base target="_top">
<button id=calc>test</button>
<textarea id=t></textarea>
<script>
document.getElementById("calc").onclick=function(){
document.getElementById("t").value="test";
}
</script>
looks like you forgot to put "calc" and "t" inside quatation marks like this - "id_of_an_element"
When I used Visual Code to check if it works in pure HTML it fixed it, but in Google Apps Script it didn't
I tested the below code in Google Apps Script and it works, I hope it helps
<!DOCTYPE html>
<html lang="en">
<body>
<base target="_top">
<button id="calc">test</button>
<textarea id="t">my text area inital value</textarea>
<script>
document.getElementById("calc").onclick=function(){
document.getElementById("t").value="test";
}
</script>
</body>
</html>