kcmr / code-sample Goto Github PK
View Code? Open in Web Editor NEWA wrapper element for highlight.js
Home Page: https://kcmr.github.io/code-sample/
License: MIT License
A wrapper element for highlight.js
Home Page: https://kcmr.github.io/code-sample/
License: MIT License
When I try to use it via webpack + Polymer 3 + typescript it throws the error:
index.ts:53 ReferenceError: hljs is not defined
at Object../node_modules/@kuscamara/code-sample/vendor/highlight/highlight.pack.js (highlight.pack.js:formatted:1)
at __webpack_require__ (bootstrap:767)
at fn (bootstrap:130)
at Module../node_modules/@kuscamara/code-sample/code-sample.js (highlight.pack.js:formatted:1)
at __webpack_require__ (bootstrap:767)
at fn (bootstrap:130)
at Module../src/components/index-page/index.ts (indexPage.684e59f8986e2130e02b.chunk.js:76)
at __webpack_require__ (bootstrap:767)
at fn (bootstrap:130)
Code:
import '@kuscamara/code-sample/code-sample.js'
I have a Polymer 3 element with the content:
<code-sample>
<template preserve-content>
<script src="foo" async></script>
</template>
</code-sample>
On chrome it works just fine, but on Firefox with webcomponentsjs it renders incorrectly.
Chrome:
<script src="foo" async></script>
Firefox:
<script src="foo" async class="style-scope index-page"></script>
This has the same problem as Polymers demo-snippet...
It doesn't work inside another template ( aka inside a custom element )
Looks like this dependency is missing in this repo. Super awesome web component by the way!
I really like your component. The only missing point I see is a copy button for copying the code snippet in one click. Adding this feature would be really awesome.
have an element leveraging this (great component btw) and it throws this in console. Don't think this style is exported anywhere for it to leverage.
I'm running into a little issue here:
This:
<code-sample>
<template>
function both(x, y) {
if (x && y) {
return 'Both';
}
if (x && !y) {
return 'First';
}
if (!x && y) {
return 'Second';
}
}
</template>
</code-sample>
renders like this:
function both(x, y) {
if (x && y) {
return 'Both';
}
if (x && !y) {
return 'First';
}
if (!x && y) {
return 'Second';
}
}
Do you know how I can easily get ampersands to display properly?
Is there a way, or could there be added a way to import different variants of the highlight.pack.js
file? The one included only supports the standard choice of languages I think and there are many more to choose from.
When references to JS literals are included, it is not able to escape expressions of the type
${example}
Example:
export class Example extends ExampleBase {
static get template() {
return html'
<p>${super.template}</p>
';
}
}
Error in web console:
Uncaught Error: non-template value passed to Polymer's html function: undefined
at htmlValue (html-tag.js:63)
at template.innerHTML.values.reduce (html-tag.js:106)
at Array.reduce ()
at html (html-tag.js:106)
So, the wysiwyg editor that I'm using to create code samples does not use \n
line breaks to create new lines, it uses <p>
tags. I do not want the <p>
tags to show up with my code (I'm creating code samples for JavaScript). What would you suggest to get rid of the <p>
tags and instead have line breaks? I would have thought that adding the render
attribute to code-sample
would render the html, but it doesn't seem to be working. Thanks for any insights
I have a code snippet displayed with this great code-sample
element:
<my-element my-attribute="DEFAULT_VALUE"></my-element>
However, I would like to replace "DEFAULT_VALUE" by a value retrieved dynamically. For example, a value available in an existing Polymer property. I mean something like the following:
<my-element my-attribute="[[myAttributeDefaultValue]]"></my-element>
The purpose is to display a configuration example. Unfortunately, the Polymer expression is not evaluated. Is there a way to achieve that?
I tried to use a template like this:
<code-sample type="csharp">
<template preserve-content>
void f()
{
int sum = 0;
for (int i = 0; i < 100; i++)
{
List<int> result = CallFunction(i);
}
}
</template>
</code-sample>
but I (strangely) obtain a result the '<' symbol in the 'for' is replaced by the < and it creates a closing tag '', corresponding erroneously to the List definition, as if it was a tag.
Am I missing anything?
Thanks
Andrea
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.