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
Related
Hi i want to generate a pdf of big page as one single file without page break.
Below image shows page break upon download(that i want to avoid, want to download as single page).
Question: i don't want to split the page upon download as multiple page. but want a single page.
here is what my working example look like codesandbox demo
Note: any pdf generating plugin is fine for me, if it works.
Please help me thanks in advance !
Your current styles do not make it easy to set the page media there are just too many conflicts in A4 layout so you need to reconsider the output as A3 or A2 as seen here 4A4 printed without any code box controls, or scale down your output to fit on the A4 page you have set.
Have you considered an API rest service? Restpack HTML to PDF has a free trial. Worth a shot to see if you can get the correct formatting. The API call's JSON body allows you to specify the px length and width you want. This should avoid pages breaks if you size it correctly. You can read their documentation here
You can use the CSS properties break-before, break-inside and break-after. In your concrete example, adding this CSS rule avoids all the flex containers splits:
.flex-container {
break-inside: avoid;
}
Please note that there are some limitations to these rules, and some browsers might produce different results too.
The PDF standard
The PDF file format standard was built on a page descriptor language and created for documents with defined page sizes.
This means that a valid PDF file does not support unpaginated content.
So what?
It may be achieved in some unsupported manner, but circumventing the standards will usually result in unpredictable behavior across different viewers.
You may be able to generate one big non-standard page size, but that could also be a potential problem in some PDF viewers.
Still want to try?
It's up to you, go ahead, but what ever you do, make sure you test your output files well.
Preferably with several of the most popular PDF reader/viewer applications before distributing them.
Unless you want to publish files that may turn out to be useless to your intended recipients.
Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell
I need to create a simple rich-text editor that saves its contents to an XML file using arbitrary markup to indicate special text styles (e.g: [b]...[/b] for bold and [i]...[/i] for italic). All the backend PHP stuff seems fairly straightforward, but the front-end WYSIWYG portion of the feature seems a bit more convoluted. I've been reticent to use one of the currently-available JavaScript-based WYSIWYG editors because the rich-text options I want to allow are so limited, and these applications are so fully-featured that it almost seems like more work to stip them down to the functions I need.
So, in setting out to create a bare-bones rich-text editor, I've encountered three approaches:
The first two approaches use the contentEditable or designMode properties to create an editable element, and the execCommand() method to apply new text styles to a selected range.
The first option uses a standard div element, executes all styling commands on that elements contents.
The second option uses the editible body of a window enclosed in an iframe, then passes any styling commands initiated from buttons in the parent document into its contentWindow to alter selected ranges in the contained body. This seems like several extra steps to accomplish the same effect as option one, but I suppose the isolation of the editable content in its own document has its advantages.
The third option uses a textarea overlaying a div, and uses the oninput JS event to update the background div's innerHTML to match the input textarea's value whenever it changes. Obviously, this requires some string finagling to to convert elements like newline characters in the textarea to <br/> in the div, but this would allow me to preserve the integrity of my [/] markup, while relegating the potentially-messy DOM manipulation to front-end display only.
I can see benefits and drawbacks for each method. the contentEditable solutions seem initially the simplest, but support for this features tends to vary across browsers, and each browser that DOES support it seems to manipulate the DOM differently when implementing execCommand(). As mentioned before, the textarea/div solution seems like the best way to preserve my arbitrary styling conventions, but the custom string-manipulation procedure to display rich text in the output div could get pretty hairy.
So, I submit to you my question: Given the development goals I've outlined, which method would you choose, and why? And of course, if there's another method I'm overlooking that might better serve my purpose, please enlighten me!
Thanks in advance!
Have you looked at http://php.net/manual/en/book.bbcode.php? This is your answer. If you are having doubts, then you are doing something wrong. :-)
Then use JS to track keyup event and simple AJAX to print preview of the input. Just like in stackoverflow.
NB It would be far more efficient to generate the preview using plain-js BBcode approach. However, do not overcomplicate stuff unless you necessary need it.
The problem with BBCode, Markdown, ... is that it's not that trivial for genpop. I suggest looking at widgEditor, it is by far the simplest WYSIWYG editor I've seen to date. It was developed some time ago, so I am not sure about compatibility, but it sure is an inspiration.
I would have included this only as a comment, since it does not directly answer your question, but I am fairly new to SA and could not find out how to do that. Sorry.
At the moment I'm using the wysiwyg module for Drupal with tiny_mce. However, it keeps inserting all kinds of superfluous spans and other trash elements in my markup. I want to use wysiwyg mostly for semantic markup with css classes, any inline styles are a problem, because I have to clean up my html by hand - sort of defies the purpose of having a wysiwyg editor altogether. What other wysiwyg editor should I try, which will behave more sensibly?
WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.
BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.
In my experience ck editor is a very good solution.
The only problem i have seen it have is drop a instead of leaving a box blank
It has paste plain text and paste from word features that prevent extra markup from being dropped in
When working with a cms i think what is important usually is not how well you can enter markup, as a developer you can usually just use a text area and drop html, but how the editors will enter content.
Ck editor usually produces very clean results, as long as direct pasting from Word does not take place
As people have helped me out in the comments, there are two ways to integrate it with Drupal
WYSIWYG API module, and standalone module cKEditor
I really wanted to go with CKEditor myself but after trying to get rid of that adding breaks and spaces everywhere stuff I had to revert to plain text input.
I am currently considering markitup!, which you may want to investigate as well.
I am hopeful as I have good experiences with it on WP but I didn't get to try it on Drupal just yet.
I would suggest BUEditor, you can configure all buttons and thus control the output
Unfortunately I have yet to find an editor that doesn't try to mess with your code in one way or another. In Drupal, I've tried TinyMCE, FCKEditor, and CKEditor. In non-Drupal projects I've used Ephox EditLive and the YUI 2 Rich Text Editor. All of them try to "fix" or autoformat your code in one way or another, and to that end they are all frustrating. Of that group, Ephox EditLive is the worst offender, and ironically it's the only one that isn't free.
I've resigned myself to plain text editing in Drupal whenever there's a slight chance I may need to control the underlying HTML. My WYSIWYG editor is off by default; I whitelist pages in as needed. It's tedious, but for me it's better than playing tug-of-war with the WYSIWYG for control.
I've tried various editors, both desktop applications and web-based RTEs, but have not found anything that works very well. All too often, they mess up code, adding in "tag soup". Even the ones that claim to only produce valid code often produce a total mess of span tags and style attributes.
Here are some of the features I'm looking for:
mainly to use as "content creation" rather than creating whole pages or sites (I normally do the design side by hand)
supports all HTML tags (which includes <small>, <code>, <kbd>, <dl> etc)
can attach classes to the current element - many editors will insert span tags, causing mess like: <p><span style="...">...</span></p>
doesn't change code that I add (I've had editors remove hidden input fields and other stuff)
doesn't add deprecated attributes, eg border and cellspadding often get added on images and tables.
would love it if it could pick up the stylesheet I use for my page and obviously apply the styles I select
if it's a desktop app, being Linux-based is gonna be a big plus
Anyone have any recommendations? Here are some of the ones I've tried: TinyMCE, FCKeditor and various others on the web; Dreamweaver (briefly), Expression Web and KompoZer on the desktop.
Well, I'm not aware of all the existing WYSIWYG editors around, but have you considered the alternative of using a code editor and create the HTML code by hand? I know it may sound crazy at first hand, but believe me, when you start to feel comfortable with it you'll become more productive, the code is cleaner and of course, you get more flexibility.
Personally I don't like dreamweaver, but it's code editor is very good because of the intellisense that helps you remembering the tags and attributes.
I've haven't tried it, but read of it: you could try the Amaya web editor (and if you have any comments on this editor, I'd like to read them).
I expect it's mostly standards-compliant (but, doesn't run javascript).