I'm using prettify for color coding but my code is still flat and not indented correctly, how do I format it so it looks similar to github gist or pastebin? (I'm aware you can embed from these sites but it doesn't look very professional).
If your code is flat, you will need to rewrite it - as in github. Maybe you could even find an autoformatter, but it will be as language-dependent as the highlighter.
If your code is only displayed flat, you might need a <pre> tag around it or set the css property white-space:pre to the surrounding element.
I would use gist.github.com. It looks petty professorial. If still want only CSS and you are on ruby CodeRay.
Depending on your needs, CodeMirror's automatic formatting might suit.
With their formatting extension, you can just do:
editor.autoFormatRange(from, to);
Here's a demo of it in action.
You'd also get the ability to edit your code snippets - and if you don't want that, you can turn it off with the editor.readOnly() function.
Here is what I would do, your welcome to go about it differently:
I would write my code in an editor, (like Notepad++, because it's ultra awesome).
I would make sure my code was formatted the way I wanted.
I would highlight the area of code I wanted and copy it.
I would then switch to the "html" tab in my Wordpress post editor.
I would type out an opening and closing <pre> tag. If I were using prettify I would type in <pre class="prettyprint"></pre>
I would paste my code between the opening and closing <pre> tags I just created.
Related
Question: Can I get VS Code to execute JS in it's markdown preview.
A little background:
I like to use markdown in VS Code for taking notes, with a nice live preview happening in a pane to the side. I specifically like to make tables in it, but the formatting can get out of hand very quickly if you have even a minor amount of text in a certain column, especially if you use prettier.
I had the brain wave to just make a js variable with the text I'd like to include, and use document.write() to drop the text into the table, but keep the formatting in VScode from sprawling across lines. Lets pretend that I aliased document.write() to dw()
|<script>dw(colHeader1)</script> |<script>dw(colHeader1)</script> |
|------------------------------------|------------------------------------------|
|<script>dw(row1Col1Content)</script>|<script>dw(row1Col2Content)</script> |
(Not the best example, might not be readable on mobile, but hopefully you get it).
Problem is, VScode doesn't run JS in it's preview window. Any way to make it do that?
Open to other suggestions on good ways to put large chunks of text into a table cell in markdown without the text formatting breaking to the point where it's more or less not human readable.
Yes VS Code's built-in markdown preview can run scripts, however scripts are disabled by default for security reasons. You can use the Markdown: Change preview security settings command to allow scripts:
PS: But also note that just because you can, that doesn't mean you should
I'm having trouble understanding how I would populate the Quill editor with some basic HTML text using plain js.
I'm passing text with basic formatting (just bold, italic, underline and header tags) so there aren't any advanced RTF features to worry about.
So for example: My javascript might be something like
var postContent = "<h2>My short post</h2><p>This is a <strong>really, really</strong> short post.</p>";
quill.setText(postContent, "api");
I thought I'd be able to use quill.setText(postContent, "api") but that seems to display the HTML tags instead of rendering the formatted text.
Do I actually need to parse the code into a blot? Seems like there must be a way to get Quill to render that basic HTML, as it seems to work if I paste simple formatted text directly into Quill.
One thing I've tried is simply doing:
quill.root.innerHTML = postContent;
Which seems to work visibly, but I'm worried that I'm now doing something a little hacky and I might not actually be using Quill as intended. Shouldn't there be a way to accomplish this via the Quill API?
Any insight? Thanks.
There is unsafe deprecated function dangerouslyPasteHTML:
https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml
It's better to use setContents or updateContents with Delata of ops with attributes:
https://quilljs.com/docs/api/#updatecontents
I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.
In my gh-page, the code formatting tags are properly encoded.
< tag name goes here >
Corresponding <pre> and <code> tags are enclosed.
I believe this is the reason, the preview renders without any issue.
However on the resulting page UI, the code highlighting breaks after # Dependency property system - DPS.
I'm using highlightjs
This seems to be a kind of bug to me.
Any suggestions on this?
Thanks to isagalaev.
It's a bug, but not in highlight.js. Here's an excerpt of the relevant part of page source:
<pre><code>
namespace abcLib
{
public class LatinWords : IMarkupExtension<string>
...
}</code></pre>
There are two problems with it:
You probably wanted displayed as is, so you have to escape it as <string>
It looks like </code></pre> was supposed to actually end this code snippet, so they should not be escaped: </code></pre>
I don't know what kind of software generates this HTML, so I can't give any particular recommendations on how to fix those two problems. But they most certainly have nothing to do with highlighting, it's just HTML.
Good day,
I'm writing some HTML/CSS code examples on a web site. I'm using the <code> element to mark out my examples.
I'm trying to:
Convert all HTML-tags inside my <code> blocks to be displayed on my web site
Make my examples beautiful with syntax highlighting and maybe even auto indent
I have tried PrismJS and Highlighter.JS but I cannot get any of them to convert the HTML tags. Are you forced to make it server side? And if so are there any PHP-examples or tools for this that works fine with any of the JS-libraries?
Thanks in advance
Well you might do a simple trick to display html and css codes without and tag
You might simply but the text inside a input within the code
Then you might simply style it and give it custom background and everything also it will be easy for the user to copy it but make sure to right the code you want to display inside the html code not on the rendered page or it will not be displayed to the users like this
<input type="text" name="html_test_code">whatever code here</input>
And then the styling of sytax might be done using js easily