How does rendering work in web development?

[mech-eng]

"You must put special delimiters at the beginning and end of your LaTeX code, in order for MathJax to recognize it and process it. If you want the equation to appear inline with the surrounding text, put # # before and after it. If you want the equation to stand alone in a separate "paragraph", centered horizontally on the screen as in most textbooks, put $ $ before and after it.

Here's an example, first with the delimiters disabled so you can see the raw code:

A quadratic equation is of the form $ax^2 + bx + c = 0$. To solve for x, use the quadratic
formula $$x = \frac {-b \pm \sqrt{b^2 -4ac}} {2a},$$ substituting the values of the coefficients a, b and c"

In the above I cannot understand what these delimiters are. It says "delimiters disabled" how is it understood?

https://www.physicsforums.com/help/latexhelp/

Thank you.

 

[jedishrfu]

I think the # # and $ $ you listed before your equations put mathjax in a bad state.

 

[mech-eng]

I think the # # and $ $ you listed before your equations put mathjax in a bad state.

Question is about delimiters. I try to understand the explanation.

Thank you.

 

[Mark44]

"You must put special delimiters at the beginning and end of your LaTeX code, in order for MathJax to recognize it and process it. If you want the equation to appear inline with the surrounding text, put # # before and after it. If you want the equation to stand alone in a separate "paragraph", centered horizontally on the screen as in most textbooks, put $ $ before and after it.

Here's an example, first with the delimiters disabled so you can see the raw code:

A quadratic equation is of the form $ax^2 + bx + c = 0$.

In the page you were looking at, they put code tags around the # delimiters. This causes the delimiters to no be interpreted by the browser.
Another way to do this is to change the color of one # character at each end, like this:
##ax^2 + bx + c = 0##
Usually, when I do this, I change the color to black, so you can't tell that I changed the color. This time, I have used red, so that my changes can be seen.

To solve for x, use the quadratic
formula $$x = \frac {-b \pm \sqrt{b^2 -4ac}} {2a},$$ substituting the values of the coefficients a, b and c"

In the above I cannot understand what these delimiters are. It says "delimiters disabled" how is it understood?

https://www.physicsforums.com/help/latexhelp/

Thank you.

<code>$ax^2 + bx + c = 0$</code>

 

[jedishrfu]

Another way to do this is to change the color of one # character at each end, like this:
##ax^2 + bx + c = 0##
When I do this, I change the color to black, so you can't tell that I changed the color.

Nice use of color, we had a programmer do something like that in his design document where he'd either code his notes transliterated to symbol or greek font to make them initially unreadable and later he'd use white to color them so they'd only appear when you selected the text via mouse.

I was looking for an escape character and decided to use the spacing trick but color is so much nicer.

 

[mech-eng]

Another way to do this is to change the color of one # character at each end, like this:
##ax^2 + bx + c = 0##
When I do this, I change the color to black, so you can't tell that I changed the color.

Would you please re-explain the underlined part. You did not change to color to black, it seems you changed (black) # to pink in the front, and orange in the end. And what do you mean by "you can't tell that ..."?

Thank you.

 

[Mark44]

Would you please re-explain the underlined part. You did not change to color to black, it seems you changed (black) # to pink in the front, and orange in the end. And what do you mean by "you can't tell that ..."?

Thank you.

What I meant was "when I usually do this, I change the color to black." For the example, I used red so that you could see what I did. If you change the color of black text to black, it doesn't appear that you've done anything, but if you look at the actual BBCode text, you'll see that there are color tags present.

 

[mech-eng]

In the page you were looking at, they put code tags around the # delimiters. This causes the delimiters to no be interpreted by the browser.

I am confused because I am not familiar with coding but here:
1. it is clear that code tags are <code> xxx </code>. In a most simple way would you please explain or give good link about what a code tag is?

2. Are these symbols in programing called greater than, >, and smaller than, <, like in mathematics?

3. Is this, <code> xxx </code>, called a code tag because code is written inside the symbols of < >?

4. What is the main function of <code> xxx </code> and why do they spoil delimeters.

5. Do they only spoild delimiters ## or all delimiters?

Thank you.

 

[Mark44]

I am confused because I am not familiar with coding but here:
1. it is clear that code tags are <code> xxx </code>. In a most simple way would you please explain or give good link about what a code tag is?

No, those aren't code tags.
Code tags are most often used to delimit programming code in Fortran, C, Java, or any of several other languages.
Here is how the browser renders an example in the C programming language:

printf("a + b = %d", a + b);

What I actually typed looks like this:
[code=c]printf("a + b = %d", a + b);[/code]

Here's a link to all of the BBCode tags that this forum supports. The tags
https://www.physicsforums.com/help/bb-codes
Some of the BBCode tags we support can be used for bold, italic, superscript (for exponents), subscripts, and for other purposes. The actual code tags are about halfway down the page.

I used <code> and </code> to represent the LaTeX delimiters, ## and $$, which I see now was confusing. What you asked about in this thread were the LaTeX tags we use here, which are described on this page, https://www.physicsforums.com/help/latexhelp/, the same link you have in post #1.

2. Are these symbols in programing called greater than, >, and smaller than, <, like in mathematics?

Yes, but they aren't used in BBCode tags.

3. Is this, <code> xxx </code>, called a code tag because code is written inside the symbols of < >?

No, <code> and </code> aren't code tags. See my example with the printf statement above.

4. What is the main function of <code> xxx </code> and why do they spoil delimeters.

The purpose of code tags, as in my C code example above, is to format the programming code and preserve whatever indentation was used. They also display keywords and strings in color automatically.

5. Do they only spoild delimiters ## or all delimiters?

No, code tags don't disable the ## or $$ delimiters. If you put code tags around a BBCode expression, the code tags fool the browser, so that it doesn't render the BBCode expression as it normally would.
BBCode expression as it is rendered in the browser: a_nxⁿ
Same expression inside code tags, which prevent the BBCode tags from rendering

a[SUB]n[/SUB]x[SUP]n[/SUP]

The browser doesn't show the code tags.

 

[mech-eng]

No, those aren't code tags.
Code tags are most often used to delimit programming code in Fortran, C, Java, or any of several other languages.
Here is how the browser renders an example in the C programming language: What I actually typed looks like this:
[code=c]printf("a + b = %d", a + b);[/code]

Here's a link to all of the BBCode tags that this forum supports. The tags
https://www.physicsforums.com/help/bb-codes
Some of the BBCode tags we support can be used for bold, italic, superscript (for exponents), subscripts, and for other purposes. The actual code tags are about halfway down the page.

I used <code> and </code> to represent the LaTeX delimiters, ## and $$, which I see now was confusing. What you asked about in this thread were the LaTeX tags we use here, which are described on this page, https://www.physicsforums.com/help/latexhelp/, the same link you have in post #1.

I have looked the link about bb-codes. Now It is clear that ,
^{- Super Script} are code tags in BBCode and they delimite programming code such as delimiter like # or $. But you say "No, those aren't code tags." as an answer to thee question if "<code> </code>" are code tags. This is confusing because you say "In the page you were looking at, they put code tags around the # delimiters." I have looked the source code of that page and saw that they did this: "

A quadratic equation is of the form <code>$ax^2 + bx + c = 0$</code>. Don't you say that they put <code> around #?

Thank you.

 

[Mark44]

I have looked the link about bb-codes. Now It is clear that ,
^{- Super Script} are code tags in BBCode

No.
[sup] and [/sup] and the others are BBcode tags. When I say "code tags" I mean these tags [code] and [/code], which are used to delimit programming language source code, and have nothing to do with LaTeX script.

and they delimite programming code such as delimiter like # or $.

No.
You need to distringuish between programming code, such as for C, Fortran, Java, and others, versus mathematical expressions that use LaTeX script.

But you say "No, those aren't code tags." as an answer to thee question if "<code> </code>" are code tags.

These are HTML code tags (with the angle brackets < and >), but they mean nothing in BBCode or LaTex, which is what this page uses.

This is confusing because you say "In the page you were looking at, they put code tags around the # delimiters." I have looked the source code of that page and saw that they did this: "

Right, because that page is written in HTML That's a different style of page than this one here.

A quadratic equation is of the form <code>$ax^2 + bx + c = 0$</code>. Don't you say that they put <code> around #?

The writer of that Help/How-to page wrote the text in HTML. When you enter a post here you don't use HTML -- you use ordinary text OR text marked up with BBCode OR mathematical stuff marked up with LaTeX script.

On this page, <code>##ax^2 + bx + c = 0##</code> is rendered as <code>$ax^2 + bx + c = 0$</code>. The HTML <code> tags are not recognized and do nothing. I disabled the LaTeX tags (the pairs of # characters) in the first example by using BBCode color tags of the same color as the text.

On an HTML page, code tags as above would cause something to happen, and this is what you see in the LaTeX tutorial page in the link.

In summary, if you want to use BBCode tags, each start tag begins with [ and ends with ], not < and >. Each closing tag starts with [/ and ends with ]. For example, [sup] and [/sup]. I have disabled both tags by coloring the first character inside each set of brackets, using a color that looks the same as the other text inside the brackets.

If you want to use LaTeX script the expressions start and end with two # characters or two $ characters. When we want to show exactly what the unrendered LaTeX script is, we disable the tags, using one of several methods. However, we don't use <code> tags, which only have an effect on HTML pages, not pages like this one.

Hope that's clear...

 

[jedishrfu]

Here's a video on bbcodes:



BBCODES get converted to html tagging when the post is rendered in the web page by the web server.

The double dollar and double number sign codes are used by mathjax and are rendered after the web page is retrieved and before the web page is displayed. This si why some threads take a long time to load because they have a lot of latex to render.

The < code > tags are transformed by Geshi syntax hilighter or something similar like hilight.js.

So there is a lot going on when a web page loads and its hard to explain it without some understanding of javascript and how it manipulates to web page html dom structure.

 

[Mark44]

The < code > tags are transformed by Geshi syntax hilighter or something similar like hilight.js.

To be clear, on these pages "code" tags are [code] and [/code], as well as, for example [code=java] and [/code], not <code> and </code>.

 

[mech-eng]

Here's a video on bbcodes:



BBCODES get converted to html tagging when the post is rendered in the web page by the web server.

The double dollar and double number sign codes are used by mathjax and are rendered after the web page is retrieved and before the web page is displayed. This si why some threads take a long time to load because they have a lot of latex to render.

Would you please explain these in the most simple way.

1. What is "html tagging"?

2. What "rendering of a post in the web page"?

3. How can a page be retrieved?

Thank you.

 

[jedishrfu]

html tagging means using html tags:

http://www.simplehtmlguide.com/whatishtml.php

rendering a of a post in the web page means converting data for display in a web page which usually means adding html tags around the data so that it will display correctly.

You must remember that web pages aren't always static files on the server. Sometimes a web server will generate a web age from scratch using an html template ie web page with various places to add content. The process of generating a web page is known as rendering it.

Rendering can happen at two places on the web server and in your browser. Colorizing program code (the GeSHi plugin that PF uses) is done on the server whereas latex code is rendered by MathJax in your browser. Why do folks use these two approaches? If a page takes too long to load then rendering will be pushed back to the server because its usually a faster machine than the users computer. If you want your code to run everywhere then you might consider javascript and then it mus be run on the client unless if you're using the NodeJS web server that runs Javascript natively.

If you want to know more about this technology then you should start watching some Youtube videos on it. One such Youtube channel is Derek Banas who has a fair sized collection oof videos on various web technologies.

Here's one on Javascript:



https://www.youtube.com/user/derekbanas