kcmr / code-sample Goto Github PK

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?

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)

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 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

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 )

Issues

• Fix import not working when using Webpack #15

Code

• Use LitElement instead of Polymer
• Use open-wc/testing instead of WCT

Development

• Improve serve (use Parcel bundler)
• Move style to a stylesheet file
• Add eslint config

Release / CI

• Improve CI release config
• Include a bundled release

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?

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.

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

Looks like this dependency is missing in this repo. Super awesome web component by the way!

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'

Full code https://github.com/d4l3k/feedlight/blob/cc770115d7b85cb3674d74c2610a9773d68b4be3/www/src/components/index-page/index.ts#L3