What are the option that I can use to display formatted C Program in iOS. What I can think of right now is
1. Make a HTML file with code in it, and find some CSS to display in web view. Not a good option as I have to manually handle formatting.
2. Use some kind of parser to convert it in NSAttributedString and then display it in UITextView.
If correct option is one , pointer to any such CSS or java script would be great help, or if option is two is there any such parser available.
Or is there any other option to achieve same.
Lookd in pretty print and looks like it can format cpp see the following example:
You could try to paste your code in here and have it formatted (if you don't need it done dynamically). Then use Firefox with firebug plugin to right click the element, go to the root and copy the thml. Copy the css files as well (under the CSS tab you can find them)
<!DOCTYPE html>
<html>
<head>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
<body>
<pre class="prettyprint lang-cpp">
int
foo(int k)
{
if (k < 1 || k > 2) {
printf("out of range\n");
printf("this function requires a value of 1 or 2\n");
} else {
printf("Switching\n");
switch (k) {
case 1:
printf("1\n");
break;
case 2:
printf("2\n");
break;
}
}
}
</pre>
</body>
</html>
Currently there is no API available for do this.
My suggestion:
Convert your code to html and load it in UIWebView. I know there is a lot of difficulties behind this.
You can use codeformatter for converting your code to html. Hence there is no api's available this is one solution.
I had wrote an open-source library for doing this.
Please check MMP_CodeViewer
iOS port of Vim editor is available here. Not sure if you are looking for code editing as well.
Related
I have homework for my programming class which requires that I work with JS classes. On top of that, I have to work with HTML and the classes have to be defined on a separate .js file. I've done all the work, and it runs ok if the classes are defined on the same .js file, but it stops working as soon as I paste the code on a different file. I've tried importing the classes on the primary file, but I could make it work (I've tried different import codes because I've found different answers to this question on Google but no one worked, that's why I'm asking here). I believe it's probably because I'm doing something wrong at importing, but I just can't find the error.
Although your code works, keeping js files at the top of the HTML will delay the load time of the page. In a simple scenario like a homework, there's no need to worry, but in large projects it becomes crucial.
And by reading your code, it just starts when all page has already loaded, so no need to put it in the head.
Have you tried doing this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="first.js"></script>
<script src="second.js"></script>
<p>Hello World!</p>
</body>
</html>
First, I'll share some code. This is my HTML head:
<head>
<meta charset="utf-8">
<title>Obligatorio1</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="js/funciones.js"></script>
<script src="js/clases.js"></script>
</head>
This is my relevant code on the first JS:
window.addEventListener('load',inicio)
function inicio(){
document.getElementById("botonAgregarPersonas").addEventListener("click",registroPersonas);
}
let personas=[];
function registroPersonas(){
let nombre=document.getElementById("nombrePersonas").value.trim();
let seccion=document.getElementById("seccionPersonas").value;
let mail=document.getElementById("emailPersonas").value.trim();
let esta=false;
for (i=0;i<personas.length&&!esta;i++){
if (nombre==personas[i].nombre) {
esta=true;
}
}
if (esta){
alert("Nombre ya ingresado");
}else {
let Per = new Persona (nombre, seccion, mail);
personas.push(Per);
let texto=Per.nombre+" - Sección: "+Per.seccion+" - "+Per.mail;
agregarElementoEnLista(texto);
agregarEnComboCompras(Per.nombre);
agregarCheckboxes(Per.nombre);
}
}
function agregarElementoEnLista (texto){
let nodoLi=document.createElement("LI");
let nodoTexto=document.createTextNode(texto);
nodoLi.appendChild(nodoTexto);
document.getElementById("lista").appendChild(nodoLi);
And this is the code of my second JS file (the one with the class):
class Persona{
constructor(nombre, seccion, mail){
this.nombre=nombre;
this.seccion=seccion;
this.mail=mail;
}
}
I'll start saying that, while I've found out the issue, I don't understand why does it happen.
Ok, as you can see on the last piece of code, the parameters have the same name as the class attributes. If I would try copying the code on the first JS file, it would work without any issue, but as soon as I work with that code on a separate JS file it would stop working. After touching every part of the code, I ended up changing the parameters name so it would be different than the class attributes, it looks like this now:
class Persona{
constructor(_nombre, _seccion, _mail){
this.nombre=_nombre;
this.seccion=_seccion;
this.mail=_mail;
}
}
And that code right there works totally fine, without changing anything on the rest of the files (neither the first JS file nor the HTML one).
If anyone understands more than me on why does this happens, feel free to edit this answer.
Thanks everyone for the help!
I have been trying to use the library to make material for my students.
https://glorious.codes/demo
I want to make animations, but I cannot understand how to use or where to use the library. I think it is necessary to use it from an html file. install the library but when opening the page it only creates the text that I place as a test.
I am using WebStorm as IDE, creating a node.js project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/#glorious/demo/dist/gdemo.min.css">
<script src="node_modules/#glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>
</body>
</html>
Can someone guide me on what program or how to work with the library. It is the first time that I try to perform animation with JavaScript.
If you are new to web technologies, there is a pretty steep curve here. Personally, I'd take a step back and familiarize myself with the tools. If you have a minute, check out W3school's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript and this will make a lot more sense.
Now for the question you asked:
First, NodeJS isn't necessarily required to achieve your goal. You can create a simple HTML file and reference the Glorious libraries directly from the web. See what I did in the <script> and <link> elements below.
Once you have the libraries loaded, you need to:
Instantiate the library and assign it to a variable to use in the future (see const demo = new GDemo(...))
Tell the library where in your HTML you want it to render the animation. In this case it is a <div/> with id='container'.
Tell the library what to render. This is the gDemo.openApp(...) section. I pulled this example directly from this library's GitHub page.
const gdemo = new GDemo('#container');
const code = 'console.log("Hello World!");'
gdemo
.openApp('editor', {
minHeight: '400px',
windowTitle: 'demo.js'
})
.write(code, {
onCompleteDelay: 2000
})
.openApp('terminal', {
minHeight: '400px',
promptString: '$'
})
.command('node ./demo')
.respond('Hello World!')
.command('')
.end();
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Could you please detail a bit more the problem. From your example you just created an empty page. What are you trying to put in your page ? Tables ?
Also I would suggest the use of framework like Materials (https://material.io/components) within React if you are starting a Js project from scratch except if you have something specific in this lib you really want to display.
Please I need help. I found really cool code: https://codepen.io/chris-creditdesign/pen/cypJf but after I put the code into one HTML file, I can only see the output as tables (there should be a graph)
What is wrong with the code ?
I saved the code from page into a single HTML file as shown below:
<!DOCTYPE html>
<html>
<body>
HTML CODE HERE
<style>
CSS CODE HERE
</style>
<script>
JS CODE HERE
</script>
</body>
</html>
but my result are tables (I expect graphs:)
You need add to project additional library.
in your case it's
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://d3js.org/d3.v3.min.js
input these libraries before your code - in the head where the style also belongs
P.S.
In the future don't forget to watch the setting of pen project
I'm trying to code a UK Pound symbol to be written to a document by JavaScript, but it's code is not being translated and is instead displayed as entered.
See this JSBin http://jsbin.com/orocox/1/edit
This is the JavaScript:
$("#price").text('£ 1.99');
This is the html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<span id="price"></span>
</body>
</html>
This is the result:
'£(;) 1.99'
*Note that the parenthesis around the ';' are added by me to prevent the entity code from being translated on StackOverflow, but they do not exist in the actual output.
The result I want is:
'£ 1.99'.
use unicode instead: jsbin
$("#price").text('\u00A3 1.99');
explanation: the £ is an html entity and is not processed as normal text. but unicode works for any text. since you are using text it is processed as a string not an html.
check this page's encoding reference : here
Try $("#price").html('£ 1.99'); instead.
Use the character itself:
$("#price").text('£ 1.99');
This is good for the readability of your code. How you type “£” depends on your editing environment. E.g., on Windows, you can produce it by typing Alt 0163 if you cannot find any more convenient way (depending on keyboard, keyboard layout, and editor being used).
I have the following code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="js.js" id="scripter"></script>
</head>
<body>
<button>AGAIN</button>
</body>
</html>
The included js has as set of statements whichg gets executed as soon as the page load.
* NOTE : it does not contain any function and dont want to contain any function.
On click of the button AGAIN i want to eval the entire script once again. Any possible ways this can be done ??
Trying to get the script contents of the script included so that I can eval it.
Any possible ways this can be achieved ??
OR
Some other method to achieve the same ??
Thanks.
For people downvoting this : I know those are what functions are for, hence specified note specifically. Maybe I should have asked the latter part of the question directly wtihout giving much details. Is it possible for me to access the scripts content that gets included in a page ??
It can be achieved by setting <script>'s src attribute to the same with a random get variable like
scriptTag.src = scriptTag.src + "?r=" + Math.random();
which will cause the browser to load the entire file again and that's usually not a good idea, but that's how it could be done
I dont know how big that JS file of yours is but - if its possible - you can write that file as
$someVariable = ' Whole Javascript code in quotes';
And whenever you want to run the code again just call eval($someVariable).
Now you might have a question for me. How is it gunna run at the very first time.
just add following line at the end of your JS file.
eval($someVariable);