Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to add this python code into my website. How can I go about referencing the python code into the html? ? Sorry I'm a total n00b to development, just started coding a week ago, aylmao.
python
>>> print "papa bless."
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>GETTING STARTED WITH BRACKETS</h1>
<h2>This is your guide!</h2>
<!--
MADE WITH <3 AND JAVASCRIPT
-->
<p>
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight,
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help
when you want it.
</p>
<!--
WHAT IS BRACKETS?
-->
<p>
<em>Brackets is a different type of editor.</em>
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other
editors. Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build
Brackets. To learn more about how to use the key features, read on.
</p>
<!--
GET STARTED WITH YOUR OWN FILES
-->
<h3>Projects in Brackets</h3>
<p>
In order to edit your own code using Brackets, you can just open the folder containing your files.
Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
Quick Edit only use files within the currently open folder.
</p>
<samp>
Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…"
to open your own folder.
You can also use the dropdown later to switch back to folders you've opened previously, including this
sample project.
</samp>
<!--
THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
-->
<h3>Quick Edit for CSS and JavaScript</h3>
<p>
No more switching between documents and losing your context. When editing HTML, use the
<kbd>Cmd/Ctrl + E</kbd> shortcut to open a quick inline editor that displays all the related CSS.
Make a tweak to your CSS, hit <kbd>ESC</kbd> and you're back to editing HTML, or just leave the
CSS rules open and they'll become part of your HTML editor. If you hit <kbd>ESC</kbd> outside of
a quick inline editor, they'll all collapse. Quick Edit will also find rules defined in LESS and
SCSS files, including nested rules.
</p>
<samp>
Want to see it in action? Place your cursor on the <!-- <samp> --> tag above and press
<kbd>Cmd/Ctrl + E</kbd>. You should see a CSS quick editor appear above, showing the CSS rule that
applies to it. Quick Edit works in class and id attributes as well. You can use it with your
LESS and SCSS files also.
You can create new rules the same way. Click in one of the <!-- <p> --> tags above and press
<kbd>Cmd/Ctrl + E</kbd>. There are no rules for it right now, but you can click the New Rule
button to add a new rule for <!-- <p> -->.
</samp>
<a href="screenshots/quick-edit.png">
<img alt="A screenshot showing CSS Quick Edit" src="screenshots/quick-edit.png" />
</a>
<p>
You can use the same shortcut to edit other things as well - like functions in JavaScript,
colors, and animation timing functions - and we're adding more and more all the time.
</p>
<p>
For now inline editors cannot be nested, so you can only use Quick Edit while the cursor
is in a "full size" editor.
</p>
<!--
LIVE PREVIEW
-->
<h3>Preview HTML and CSS changes live in the browser</h3>
<p>
You know that "save/reload dance" we've been doing for years? The one where you make changes in
your editor, hit save, switch to the browser and then refresh to finally see the result?
With Brackets, you don't have to do that dance.
</p>
<p>
Brackets will open a <em>live connection</em> to your local browser and push HTML and CSS updates as you
type! You might already be doing something like this today with browser-based tools, but with Brackets
there is no need to copy and paste the final code back into the editor. Your code runs in the
browser, but lives in your editor!
</p>
<h3>Live Highlight HTML elements and CSS rules</h3>
<p>
Brackets makes it easy to see how your changes in HTML and CSS will affect the page. When your cursor
is on a CSS rule, Brackets will highlight all affected elements in the browser. Similarly, when editing
an HTML file, Brackets will highlight the corresponding HTML elements in the browser.
</p>
<samp>
If you have Google Chrome installed, you can try this out yourself. Click on the lightning bolt
icon in the top right corner of your Brackets window or hit <kbd>Cmd/Ctrl + Alt + P</kbd>. When
Live Preview is enabled on an HTML document, all linked CSS documents can be edited in real-time.
The icon will change from gray to gold when Brackets establishes a connection to your browser.
Now, place your cursor on the <!-- <img> --> tag above. Notice the blue highlight that appears
around the image in Chrome. Next, use <kbd>Cmd/Ctrl + E</kbd> to open up the defined CSS rules.
Try changing the size of the border from 10px to 20px or change the background
color from "transparent" to "hotpink". If you have Brackets and your browser running side-by-side, you
will see your changes instantly reflected in your browser. Cool, right?
</samp>
<p class="note">
Today, Brackets only supports Live Preview for HTML and CSS. However, in the current version, changes to
JavaScript files are automatically reloaded when you save. We are currently working on Live Preview
support for JavaScript. Live previews are also only possible with Google Chrome, but we hope
to bring this functionality to all major browsers in the future.
</p>
<h3>Quick View</h3>
<p>
For those of us who haven't yet memorized the color equivalents for HEX or RGB values, Brackets makes
it quick and easy to see exactly what color is being used. In either CSS or HTML, simply hover over any
color value or gradient and Brackets will display a preview of that color/gradient automatically. The
same goes for images: simply hover over the image link in the Brackets editor and it will display a
thumbnail preview of that image.
</p>
<samp>
To try out Quick View for yourself, place your cursor on the <!-- <body> --> tag at the top of this
document and press <kbd>Cmd/Ctrl + E</kbd> to open a CSS quick editor. Now simply hover over any of the
color values within the CSS. You can also see it in action on gradients by opening a CSS quick editor
on the <!-- <html> --> tag and hovering over any of the background image values. To try out the image
preview, place your cursor over the screenshot image included earlier in this document.
</samp>
<h3>Need something else? Try an extension!</h3>
<p>
In addition to all the goodness that's built into Brackets, our large and growing community of
extension developers has built hundreds of extensions that add useful functionality. If there's
something you need that Brackets doesn't offer, more than likely someone has built an extension for
it. To browse or search the list of available extensions, choose <strong>File > Extension
Manager…</strong> and click on the "Available" tab. When you find an extension you want, just click
the "Install" button next to it.
</p>
<!--
LET US KNOW WHAT YOU THINK
-->
<h2>Get involved</h2>
<p>
Brackets is an open-source project. Web developers from around the world are contributing to build
a better code editor. Many more are building extensions that expand the capabilities of Brackets.
Let us know what you think, share your ideas or contribute directly to the project.
</p>
<ul>
<li>Brackets.io</li>
<li>Brackets Team Blog</li>
<li>Brackets on GitHub</li>
<li>Brackets Extension Registry</li>
<li>Brackets Wiki</li>
<li>Brackets Developer Mailing List</li>
<li>#brackets on Twitter</li>
<li>Chat with Brackets developers on IRC in #brackets on Freenode</li>
</ul>
</body>
</html>
use code tag but if you need hightlighting the check: highlight.js
<code>print('Hello')</code>
Here is an example for you even though you provided none of yours.
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
>>> print "papa bless."
</code>
</pre>
</body>
</html>
I specifically modified your code by adding one more space between print and the what you have in double quotes to demonstrate what value pre tag offers here. It simply displays preformatted text the way it is provided preserving tabs, double spaces and any other typographic formatting you may use in your code.
You may run into issues with pre tag if you have long lines of code, which may overflow (or not) inside a container holding your pre tag, but you can deal with that using CSS, by adding a scroll bar
pre {
overflow: auto;
}
or simply wrapping the text...
pre {
white-space: pre-wrap;
}
Understand, that most browsers display the text wrapped in pre tags using the default setting for CSS:
<style>
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
</style>
Related
This has been pissing me off from yesterday, and I'm just out of ideas.
I'm trying to write a PDF with a subclassed pdfkit.PDFKit (let's call it MyPDFKit): it works well (I just subclassed it to add the possibility of using xvfb-run in the args). I specify that is not a problem of the class.
I was trying to convert some HTML to PDF. The template looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Simplified for reading. -->
<style type="text/css">..</style>
</head>
<body>
<!-- Simplified for reading. -->
{% for obj in objs %}
<div>
<div>
<p>{{ obj.name }}</p>
</div>
<p>{{ obj.age }}</p>
</div>
{% endfor %}
</body>
</html>
With these template, and objs having near 400 instances, the output of the HTML is near 5k lines.
The problem comes when trying to splash that into the file. It could be in one of this two places:
MyPDFKit.to_pdf(..) (called from MyPDFKit.from_string(..))'s stdout has a limit size, and truncates part of the string (source code of the function is here).
f.write(..) is the one that truncates the string you pass in.
Cannot be a problem of the template or of the objects' data, because I can create PDFs correctly when getting only a certain range of then (more than 350 items in the same rendering starts leading to the problem due to HTML number of lines). For example, objs[:315] works well, but objs[:350] not.
I've tried setting the buffer size to -1, which is unlimited, but also don't work. Anyone had this issue before?
Ok, so finally, with the help of another programmer, I found the issue.
It looks like PDFKit, when processing a large amount of HTML (in number of PDF pages we're talking more than 349 more or less), sends progress bars comments to the buffer to see how it goes. Then, when it finish, also sends a done comment message.
This comments (I say comments to give they a type of data, cause I don't know really how PDF files handle comments), in programs like Adobe Reader, cannot be handle, so it detects that the file is corrupted/damage, while in programs like SumatraPDF/Edge, it just ignores then and shows the PDF nicely.
Now, how to prevent this behaviour? Passing the --quiet argument. But, for that, you'll need to subclass PDFKit (as I did with MyPDFKit), and add the args manually (line of code).
Problem solved.
EDIT
Seems that I can pass --quiet in the options kwargs, so no need of subclassing if that's only the problem (although it would be nice to have it active by default...)
In my form on django, I have a field called package_includes and a field called price. Right now, the content in package_includes it is simply text. So if I input "paper, glue, glitter" it will display exactly as i typed it, unable to change anything. However, I want the text to work like individual tags ->How I want tags to look
So when you click on one of the individual items (EX: "paper", "glue", or "glitter") i want it to display a drop down that allows you the option to put extra glitter for an additional $2.00 to the total.
Also, at the end of the text I want a tag that displays "Add" and this function would allow you to add items not included in this specific package. For example, you should be able to add crayons for $5, highlighter for $2.50, etc.
I am new to programming and don't fully understand how to add a function to text like this in a field in django. Thank you in advance for your help!
The answer to your question is unfortunately not a step-by-step instruction of how to go from 0 to a complete working example - only a pointer in the right direction.
What you need is achieved through CSS (producing the visual effect you want) and JavaScript (handling the drop-down functionality; it most probably has to be your own script based on jQuery). All of what you want needs to live (execute) within the Internet browser, and Django can only help there by serving the static CSS and script files, and referencing them in the actual page, when you put them in the correct template.
Here is an example of Wagtail Admin doing something similar:
If you open the page source in your browser, all you will see as HTML code for this is the following:
<div class="field-content">
<div class="input ">
<input id="id_tags" name="tags" type="text" value=""hello world", blog" /><script>initTagField("id_tags", "/admin/tag-autocomplete/");</script>
<span></span>
</div>
</div>
But if you open the page with FireBug, your browser's Development Tools, or the Web Developer extension, with visual styles applied it will decompose to something like this:
If you notice, the applied style to the form input element is display: none;. What you see is actually the styled unordered list elements right after. In order to be able to use them in your script, you need to be able to get to them/their contents from within your JS function. One strategy would be to assign an id attribute to all of the visible <li> elements. It can be something counter-based (e.g. id="shopping-cart-item-0", id="shopping-cart-item-1", etc.). Another way would be to assign an id to the <div class="input"> element, and within your function get all its DOM descendants of type <li>. Whatever works better for you. Then you could parse the label (inner text) of the list element in your script to get the type of item you are dealing with, and from then on find the discount price and apply it...
I would suggest that you start with a working example - find some app that uses taggit or similar package for Django and install it in a test application. Then you can use your browser's or preferred web development extension to play around with the CSS on them and see how different options affect the visual aspect of what you need. Once you are comfortable with that, see how you can build drop-down menus with jQuery. I believe the jQuery site has enough tutorials on the topic.
In general, It is possible to download the video by right-click.
But I don't know how to find this video's src using selenium.
<div id="video-processing" class="video-processing hidden">Processing video, please check back in a while</div>
<video id="video-player" class="video-js vjs-default-skin hidden" controls preload="auto" width="640" height="264" poster="http://i3.ruliweb.com/profile/16/12/01/158b9f7cb02326425.jpeg"></video>
I needs your help. thanks.
I had a problem like your question,
If you can not find the src by Inspect by browser Or get the page source code by Python (For various reasons, such as controlling several quality of video or for security & police reasons) ➡
One hundred percent is being changed by JavaScript. Otherwise should have been visible in the HTML code.
So I have a very simple recommendation and that is to use this code in Console:
var x = document.getElementsById("video-player").getAttribute("src");
console.log(x);
alert(x);
Of course, it would be much better if you give the site Address.
I am working on a web-based application that lets users collect certain information.
On the last page an analysis of the collected data is displayed. This is done partially by numbers and by changing the background colors of the fields in which the numbers are displayed.
After having looked at the analysis on his phone, the user is supposed to enter his email adress as well as his name in a form. Hitting the "Send" Button, it is my aim to send the user a pdf (or any kind of document that includes the html and the css code (because of the colors))via email. To make this more clear, the user is supposed to reveive a copy of the last page of the application. It has to be considered that the user is working on his phone, but the document he receives should be formatted to be viewed on a Computer.
Currently I use a printDiv() function that results in the opening of the printing menu, though in a preview only the html (without the css) is displayed.
Therefore, my questions are:
How can I include the css to the preview? The css is determined in a javascript function (I am not using a seperate stylesheet as this is the only css code I need).
$('#field').val(fieldValue);
{if (fieldValue> 85){
$(this).css('background-color', '#008000');
}
else if (fieldValue>= 50 ){
$(this).css('background-color', '#FFA500');
}
else
$(this).css('background-color', '#FF0000');
}
)
;}
How can I then send the document via email? Is my current approach expedient? I am unsure about this, because the users will use the application exclusively with their phones and many do not support the print statement. My printDiv() function looks like this:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}
How do I continue after this? I think I have to save the pdf to the server, send it from there and after that delete the document. Is this correct? I am happy about any advice. If possible I plan to work with python for the following steps.
I hope that I have precisely described my problems and appreciate every effort to help me!
JavaScript does not work with most email clients. In order for the css to work, it needs to be pulled out of a script and left static.
There are a multitude of email clients that work in differing ways with CSS. As an example, if you wanted to style H1, in email you can style it three ways:
Inline style (most effective):
<h1 style="color: #ff0000;">Hello</h1>
Internal style sheet (limited effectiveness):
<head>
<style>
h1 {color: #ff0000;}
</style>
</head>
External style sheet (very limited effectiveness):
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Some email clients will not work with an external style sheet. Some will substitute their own styles for an Internal style sheet and many will block an External style sheet completely.
If you can inline your values, you should be able to send an html email styled to your choosing.
03420 Nucleotide excision repair<br>
03430 Mismatch repair<br>
03440 Homologous recombination<br>
</ul>
</ul>
<!-- -->
<b>Environmental Information Processing</b>
<ul>
Membrane transport
<ul>
02010 ABC transporters<br>
I need to extract the pathway codes(eg. 03420, 03430 etc) from a webpage using python which I've done using Beautifulsoup. I want to stop before Environmental Information Processing so I was looking for some distinct tag here I can use. <!-- --> is at the perfect position but I can't figure out how to stop at this point. Can somebody tell me if/how I can use it to stop extracting the codes before the comment.
(I'm very new to python and html and straightaway jumping to web parsing so bear with me please.)
In HTML, XHTML, XML, the <!-- starts a commentary scope and --> finish it. It is a comment and it does not affect the result on the browser, but add some bytes on the response.
<!-- comment some text
and you can break lines.
It is compatible for html, xhtml and xml.
-->
On other languages you have other sintaxes for comments, for sample:
/* this is a comment for C, C++, C#, Java, Javascript, CSS, etc.
you can break lines */
// this is a single line comment for C, C++, C#, Java, Javascript.. you can't break lines here
See more about comments if you want on this link.
It's a block comment in html syntax. http://www.w3schools.com/html/html_comments.asp
It's an HTML comment without anything in it.
As it stands it seems to have no purpose as it fills no function in the page, but there might be a reson for it being there. I might be a place for some server code to display some internal information, so it's a bit risky to count on it staying the same.
If it is just an empty comment, the author of the page might decide to clean it away.
The text in the following tag seems more reliable to look for, as that actually serves a purpose in the page.