Vue.js component: Beautiful code highlighter


 
Thread Tools Search this Thread
Top Forums Web Development Vue.js component: Beautiful code highlighter
Prev   Next
# 2  
Old 05-05-2019
Also, this is a possibility:

GitHub Highlight.js

Quote:
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn't depend on any framework, and has automatic language detection.

Reference: Web Page: highlight.js

Image
 
Login or Register to Ask a Question

Previous Thread | Next Thread

6 More Discussions You Might Find Interesting

1. Web Development

Documenting Installation Problem with vue-beautiful-chat

REF: https://github.com/mattmezza/vue-beautiful-chat $ git clone https://github.com/mattmezza/vue-beautiful-chat.git Cloning into 'vue-beautiful-chat'... remote: Enumerating objects: 534, done. remote: Total 534 (delta 0), reused 0 (delta 0), pack-reused 534 Receiving objects: 100%... (2 Replies)
Discussion started by: Neo
2 Replies

2. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

3. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Turning jQuery Code into Vue.js

The following is some code I am working on the replace our navbar (someday) with a Vue component. Vue.component("unix-navbar", { template: `<div class="neo-table-border vuenavbar"><div class="flex-item" style="margin-bottom:10px;padding-top:13px;"><a class="vuenavbarhome"... (19 Replies)
Discussion started by: Neo
19 Replies

5. Web Development

A simple UNIXtime component in Vue.js

A shout out to Scott who gave me a helping hand to turn a simple sample Vue.js app I wrote yesterday into a Vue.js component: Vue.component("unix-time", { template: `<div class="time">{{unixtime}}</div>`, data() { return { unixtime: "" }; }, methods: { ... (1 Reply)
Discussion started by: Neo
1 Replies

6. Shell Programming and Scripting

like to share this beautiful shell script

Hello Everybody I recently got this beautiful shell script from my friend. I like to share it with every body as I am bit new to shell scripting enviorment. I hope people in this site will like it. It is related to checking the filesystem threshold limit. After getting threshold limit of... (0 Replies)
Discussion started by: girish.batra
0 Replies
Login or Register to Ask a Question
Mason::Manual::FAQ(3pm) 				User Contributed Perl Documentation				   Mason::Manual::FAQ(3pm)

NAME
Mason::Manual::FAQ - Frequently asked questions about Mason COMPONENTS
Can I create global variable(s) that can be seen from all components? Mason components each run in their own packages, so if you set a regular global in one you won't be able to see it in the others. But you can use allow_globals and set_global to create globals accessible from all components. Why does my output have extra newlines/whitespace and how can I get rid of it? See Whitespace And Newlines in the syntax manual. To suppress extra newlines you can use a backslash at the end of each line, or you can use the NoBlankLines filter. To emit binary data without the risk of inserting extra whitespace, surround your code with $m->clear_buffer and $m->abort: <%init> $m->clear_buffer; open(my $fh, '<', 'binary-file') or die $!; my $buffer; while (read $fh, $buffer, 8192) { $m->print($buffer); } $m->abort; </%init> I'm trying to generate an image or other binary file, but it seems to be getting corrupted. This is almost always caused by unwanted whitespace or other output at the beginning or end of your binary data. Use $m->clear_buffer and $m->abort as in previous answer. How do I put comments in components? See Comments section in the syntax manual for reference. o Put general comments in the "<%doc>" section. o Within code blocks ("<%class>", "<%init>", "<%perl>", etc.), use standard Perl comments ('#'). o Use "<% # %>" for single or multi-line comments anywhere outside of Perl sections. o If you are producing HTML, you can use standard HTML comments delimited by <!-- -->. The difference is that these comments will appear in the final output. What's a good way to temporarily comment out code in a component? For HTML, you might be tempted to surround the section with "<!-- -->". But be careful! Any code inside the section will still execute. Here's a example of commenting out a call to an ad server: <!-- temporarily comment out <& /shared/fetch_ad.mi &> --> The ad will still be fetched and counted, but not displayed! A better way to block out a section is "if(0)": % if(0) { ... % } Code blocked out in this way will neither be executed nor displayed, and multiple "if(0)" blocks can be nested inside each other (unlike HTML comments). Another way to block out code is with a "<%doc>" tag, although this not cannot be nested. How can I capture the output of a component (and modify it, etc.) instead of having it automatically output? Use $m->scomp. How can I capture the output from arbitrary code that calls components, etc.? Use $m->capture. How can I get a list of components matching a path pattern? Use $m->glob_paths, e.g. my @paths = $m->glob_paths('/some/comp/path/*'); This will work even with multiple component roots; you'll get a combined list of all matching component paths in all component roots. How can I access $m (the request object) from outside a component, e.g. inside a regular class? Use Mason::Request->current_request: package Foo; sub bar { my $m = Mason::Request->current_request; } When using multiple component roots, is there a way to explicitly call a component in a specific root? Multiple component roots were designed to work just like Perl's @INC. A given component path matches exactly one file, the first file found in an ordered search through the roots. There is no way to explicitly ask for a file in a specific root. HTTP and HTML How do I use Mason to process web requests? You need to use Mason in conjunction with a web framework. Poet is a web framework designed specially for Mason. Catalyst and Dancer can also use Mason for their templating layer. See Mason::Manual::Setup. How can I HTML-escape the output of "<% %>" tags? See the "H" filter in Mason::Plugin::HTMLFilters. If you want to do this automatically for all "<% %>" tags, see Mason::Plugin::DefaultFilter. Why is Mason so slow with standard CGI? Under standard CGI you must load all modules and initialize your environment with every request. Mason's startup cost (mostly due to Moose) will make this particularly sub-optimal. Ask yourself whether you absolutely have to use CGI, and if not, switch to a persistent solution like mod_perl or Fast CGI or Starman. SEE ALSO
Mason AUTHOR
Jonathan Swartz <swartz@pobox.com> COPYRIGHT AND LICENSE
This software is copyright (c) 2011 by Jonathan Swartz. This is free software; you can redistribute it and/or modify it under the same terms as the Perl 5 programming language system itself. perl v5.14.2 2012-05-02 Mason::Manual::FAQ(3pm)