tinkertrain / panda-syntax-vscode

Panda Project, created for Editors and Terminals

Jekyll Now

Jekyll is a static site generator that's perfect for GitHub hosted blogs (Jekyll Repository)

Jekyll Now makes it easier to create your Jekyll blog, by eliminating a lot of the up front setup.

• You don't need to touch the command line
• You don't need to install/configure ruby, rvm/rbenv, ruby gems ☺️
• You don't need to install runtime dependancies like markdown processors, Pygments, etc
• If you're on Windows, this will make setting up Jekyll a lot easier
• It's easy to try out, you can just delete your forked repository if you don't like it

In a few minutes you'll be set up with a minimal, responsive blog like the one below giving you more time to spend on writing epic blog posts!

Quick Start

Step 1) Fork Jekyll Now to your User Repository

Fork this repo, then rename the repository to yourgithubusername.github.io.

Your Jekyll blog will often be viewable immediately at http://yourgithubusername.github.io (if it's not, you can often force it to build by completing step 2)

Step 2) Customize and view your site

Enter your site name, description, avatar and many other options by editing the _config.yml file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here too.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at http://yourgithubusername.github.io - if not, give it ten minutes as GitHub suggests and it'll appear soon

There are 3 different ways that you can make changes to your blog's files:

1. Edit files within your new username.github.io repository in the browser at GitHub.com (shown below).
2. Use a third party GitHub content editor, like Prose by Development Seed. It's optimized for use with Jekyll making markdown editing, writing drafts, and uploading images really easy.
3. Clone down your repository and make updates locally, then push them to your GitHub repository.

Step 3) Publish your first blog post

Edit /_posts/2014-3-3-Hello-World.md to publish your first blog post. This Markdown Cheatsheet might come in handy.

You can add additional posts in the browser on GitHub.com too! Just hit the + icon in /_posts/ to create new content. Just make sure to include the front-matter block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md

Local Development

1. Install Jekyll and plug-ins in one fell swoop. gem install github-pages This mirrors the plug-ins used by GitHub Pages on your local machine including Jekyll, Sass, etc.
2. Clone down your fork git clone [email protected]:yourusername/yourusername.github.io.git
3. Serve the site and watch for markup/sass changes jekyll serve
4. View your website at http://0.0.0.0:4000
5. Commit any changes and push everything to the master branch of your GitHub user repository. GitHub Pages will then rebuild and serve your website.

Moar!

I've created a more detailed walkthrough, Build A Blog With Jekyll And GitHub Pages over at the Smashing Magazine website. Check it out if you'd like a more detailed walkthrough and some background on Jekyll. 🤘

It covers:

• A more detailed walkthrough of setting up your Jekyll blog
• Common issues that you might encounter while using Jekyll
• Importing from Wordpress, using your own domain name, and blogging in your favorite editor
• Theming in Jekyll, with Liquid templating examples
• A quick look at Jekyll 2.0’s new features, including Sass/Coffeescript support and Collections

Jekyll Now Features

✓ Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
✓ Fully responsive and mobile optimized base theme (Theme Demo)
✓ Sass/Coffeescript support using Jekyll 2.0
✓ Free hosting on your GitHub Pages user site
✓ Markdown blogging
✓ Syntax highlighting
✓ Disqus commenting
✓ Google Analytics integration
✓ SVG social icons for your footer
✓ 3 http requests, including your avatar

✘ No installing dependancies
✘ No need to set up local development
✘ No configuring plugins
✘ No need to spend time on theming
✘ More time to code other things ... wait ✓!

Questions?

Open an Issue and let's chat!

Other forkable themes

You can use the Quick Start workflow with other themes that are set up to be forked too! Here are some of my favorites:

• Hyde by MDO
• Lanyon by MDO
• mojombo.github.io by Tom Preston-Werner
• Left by Zach Holman
• Minimal Mistakes by Michael Rose
• Skinny Bones by Michael Rose

Credits

• Jekyll - Thanks to its creators, contributors and maintainers.
• SVG icons - Thanks, Neil Orange Peel. They're beautiful.
• Solarized Light Pygments - Thanks, Edward.
• Joel Glovier - Great Jekyll articles. I used Joel's feed.xml in this repository.
• David Furnes, Jon Uy, Luke Patton - Thanks for the design/code reviews.
• Bart Kiers, Florian Simon, Henry Stanley, Hun Jae Lee, Javier Cejudo, Peter Etelej, Ben Abbott, Ray Nicholus, Erin Grand, Léo Colombaro, Dean Attali, Clayton Errington, Colton Fitzgerald, Trace Mayer - Thanks for your fantastic contributions to the project!

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

I want to keep Jekyll Now as minimal as possible. Every line of code should be one that's useful to 90% of the people using it. Please bear that in mind when submitting feature requests. If it's not something that most people will use, it probably won't get merged. 💂‍♂️

panda-syntax-vscode's Issues

Extremely low contrast in diff viewer for comment changes.

Summary

Looking at diffs using the VSCode diff editor shows really low contrast text to background especially with backgrounds.

Language: JavaScript (Possibly other languages that have comments syntax highlighting)

Just diff any two files with changes in comments and you can see the problem. Here is a screenshot.

I love Panda syntax, this is the only thing that is really annoying.

React component default props arg breaking some highlighting

Summary

As shown in screenshot, having an empty array default value for React component props is messing up the rest of the highlighting

Language: javascript
Raw File Contents:

import PropTypes from 'prop-types';
import React from 'react';
import Markdown from 'react-remarkable';
import { Helmet } from 'react-helmet';

import DocMeta from 'components/DocMeta';
import Panel from 'components/Panel';
import Spinner from 'components/Spinner';
import Container from 'components/Container';
import Row from 'components/Row';
import Column from 'components/Column';
import CardsBoard from 'components/CardsBoard';
import Comments from 'modules/comments/components/Comments';
import getCardsByBoard from 'utils/getCardsByBoard';
import DeckPageHeader from './DeckPageHeader';

const Commander = ({ src, alt }) => (
  <div>
    <h3>Commander</h3>
    <img src={src} alt={alt} />
  </div>
);

const DeckPage = ({
  id,
  name,
  format,
  cards,
  user_id,
  tags,
  featured_card,
  colors = [],
  created_at,
  updated_at,
  stars_count,
  has_starred,
  can_update,
  can_delete,
  loading,
  description,
  isLoggedIn
}) => {
  if (loading) {
    return <Spinner size="large" centered />;
  }

  const featuredCardSrc = featured_card.url;
  const featuredCardName = featured_card.name;

  const mainboard = getCardsByBoard(cards, 'mainboard');
  const sideboard = getCardsByBoard(cards, 'sideboard');

  const title = 'MTG Deck: ' + name + '(' + format + ')';

  return (
    <article>
      <Helmet>
        <title>{title}</title>
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:type" content="fateseal:deck" />
        <meta
          property="og:url"
          content={'http://www.fateseal.com/decks/' + id}
        />
        <meta property="og:url" content={featuredCardSrc} />
      </Helmet>
      <DeckPageHeader
        id={id}
        name={name}
        format={format}
        starsCount={stars_count}
        username={user_id.username}
        createdAt={created_at}
        updatedAt={updated_at}
        featuredCardName={featuredCardName}
        featuredCardSrc={featuredCardSrc}
        hasStarred={has_starred}
        canUpdate={can_update}
        canDelete={can_delete}
        tags={tags}
        colors={colors}
        isLoggedIn={isLoggedIn}
      />
      <Container>
        <Row>
          <Column md={8}>
            <Panel>
              <CardsBoard cards={mainboard} title="Mainboard" hasLabels />
            </Panel>
          </Column>
          <Column md={4}>
            <Panel>
              {format !== 'Commander' ? (
                <CardsBoard cards={sideboard} title="Sideboard" />
              ) : (
                <Commander src={featuredCardSrc} alt={featuredCardName} />
              )}
            </Panel>
          </Column>
        </Row>
        <Row>
          <Column md={8}>
            {description && (
              <Panel>
                <h3>Description</h3>
                <Markdown>{description}</Markdown>
              </Panel>
            )}
            <Panel>
              <Comments modelId={id} />
            </Panel>
          </Column>
        </Row>
      </Container>
    </article>
  );
};

DeckPage.propTypes = {
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  format: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  tags: PropTypes.array.isRequired,
  featured_card: PropTypes.object.isRequired,
  cards: PropTypes.array.isRequired,
  can_update: PropTypes.bool,
  has_starred: PropTypes.bool,
  loading: PropTypes.bool.isRequired,
  isLoggedIn: PropTypes.bool.isRequired
};

DeckPage.defaultProps = {
  id: '',
  cards: [],
  name: '',
  description: '',
  tags: [],
  featured_card: {},
  user_id: {},
  loading: false
};

export default DeckPage;

emoji error about Language Support from README.md

唥 Language support
Panda Syntax Theme Supported Packages language-* and optimized for many languages:

唥 ?

Whitespace highlights blend in with background

Summary

When highlighting in VS Code, there is behavior for 'Editor: Render Whitespace' which can differentiate tabs (displayed as an arrow ->) and spaces (displayed as a dot). In Panda Syntax, the whitespace character is virtually invisible as it blends in with the background. Screenshots are at the bottom.

I'm happy to make changes to get this working, although I suspect there will be opinions on the color choice?

Language: JavaScript, Go, Markdown

Raw File Contents:
Any sample code should do here but this is a JS snippet from the included screenshot.

const balancedParens = (input) => {
  const openParens = new Set(['(', '{', '[']);
  const parenMatcher = {
    ')': '(',
    ']': '[',
    '}': '{',
  };

  // make a stack to track open and closed parens
  const stack = [];
}

JavaScript screenshot (spaces appear as dots):

Golang screenshot (tabs appear as arrows):

---

Expected Behavior

No color highlight for tags in xml files

Since the latest update tags in xml file don't have a color, I think they should look similar to html files.

Language: XML, HTML
Raw File Contents:

<?xml version="1.0" encoding="UTF-8"?>
<xliff version="1.0">
  <file source-language="en" datatype="plaintext" original="messages" date="2014-09-04T18:16:21Z" product-name="razor">
    <header />
    <body>
      <trans-unit id="dceTitle">
        <source>Socialbar</source>
      </trans-unit>
      <trans-unit id="dceDescription">
        <source>Element with social icons</source>
      </trans-unit>
      <trans-unit id="title">
        <source>Title</source>
      </trans-unit>
    </body>
  </file>
</xliff>

ANSI Bright Black Against Integrated Terminal Background

The ansiBrightBlack color in the integrated terminal is too dark against the background color:

Recommendation is to update the ansiBrightBlack color to a dark gray. Something like #696969. It constrasts better with the background:

Inlay color has a low contrast

The inlay text is not very visible:

font ?

how to change font follow ?

Broken in latest VSCode February release

Summary

Right after upgrading to latest 1.43.0 Visual Studio (February 2020 release), JavasScript functions and properties have lost their original colors.

• Properties in objects are now the same colors as functions (used to white, are now blue), which makes them hard to distinguish and read.
• Global constructors such as Number or String, used to be yellow-ish - they are now white.

• Exported members used to be white, are now blue.

• require statements are now white (used to be blue).

Language: JavaScript
Raw File Contents:

/**
 * @function
 */
const toUserFormField = applySpec({
  id: prop('id'),
  name: prop('name'),
  icon: prop('icon'),
  type: prop('type'),
  placeholder: prop('placeholder'),
  required: compose(boolify, prop('required')),
  unique: compose(boolify, prop('unique')),
  multiple: compose(boolify, prop('multiple')),
  values: compose(sortBy(ascend(prop('ordinal')), map(toAttributeValue), prop('values'))),
  attribute: prop('attribute'),
  colGroup: prop('col_group'),
  helpText: prop('help_text'),
  validations: compose(parseValidationRules, propOr('', 'validation_rules')),
  ordinal: compose(Number, prop('ordinal'))
});

Please, upload the update with the new features commited for the last 5 years!

Thank you!

Remove border-bottom from illegal expressions

Summary

VSCode already has squiggly lines for problems, so I think having a custom border at the bottom is a bit overkill...

What's going on with the project site? Domain expired?

↓ http://panda.siamak.work/ ↓

↓ https://panda.siamak.work/ ↓

左侧资源管理器的选中实在不明显 可以加强一点对比度吗

左侧资源管理器的选中实在不明显 可以加强一点对比度吗

Add LICENSE to repository

Please add LICENSE file to properly license this software.

Please add new syntax highlighting

Language: Javascript

The syntax of the iterative statement needs to be highlighted

Thank you!

Domain siamak.work is now for sale

As domain siamak.work is now for sale, should it (as panda.siamak.work) be removed from README and repository details on right side?

Any plans to support the Operator Mono font (italics) in VSCode?

Summary

I love the Panda theme but it does not seem to fully support the Operator Mono font in VSCode.

I've taken 3 screenshots for different themes to show the differences between them and Panda.
As you can see below, this and console are not in italics.
Also, the attributes in react components are not in italics either.

One Dark

comments and this are rendered correctly but not console

Dracula

this and console are rendered correctly but not comments

Panda

comments are rendered correctly but not this nor console

Language: JavaScript React

Raw File Contents:

            // clear timer for user account
            if (this.timer) {
                clearInterval(this.timer)
            }
            console.log('tada')

My settings.json

"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono, Monaco, Menlo, 'Courier New', monospace",
"editor.renderWhitespace": "boundary",
"editor.autoIndent": true,

Releasing a version of Panda that supports Mono Operator would be awesome 💯 👍

Color selector text like color property text

I like new update . But in .scss file , color selector text like color property text . It not good :(
http://prntscr.com/gcqu7d

Adopt semantic highlighting

Since 1.43, VSCode themes can take advantage of semantic highlighting.

Every theme controls whether semantic tokens are enabled. So far, only built-in themes have it enabled and I filed this issue to ask you to opt-in for the Panda theme as well.

Adoption is easy and there are new cool styling possibilities.

To turn on semantic highlighting for a theme, all you have to do is put
"semanticHighlighting": true
in the theme's definition file.

There's a good chance that no further change to the theme is needed (thanks to a default mapping from semantic tokens to TextMate scopes (if not, I'd be interested to know, so I can improve the defaults further)).

But, more interestingly, themes can tune and go wild by defining new styling rules against the semantic tokens:

"semanticTokenColors": {
    "variable.readonly": "#ff0000", 
    "parameter": { "fontStyle": "underline" },
    "*.declaration:java": { "fontStyle": "bold" }
} 

Check out our Semantic Highlighting Wiki and the Semantic Highlighting Guide for more details and feel free to ping me in this issue if I can help.

Thanks for the great work and looking forward to semantic highlighting in your theme.

Small markdown issue with README.md

There is a small issue on the README.md with a trailing --> a mix of HTML and MD.

I have opened two PR's as it is unclear which would be preferred.

PR 1: (Includes contribution information)
https://github.com/tinkertrain/panda-syntax-vscode/pull/32/files

PR 2: (Removed contribution information)
https://github.com/tinkertrain/panda-syntax-vscode/pull/33/files

Support PHP lang

Hello @tinkertrain. I hope you're great. In VSCode port of Panda it isn't good supporting PHP Language. Can fixed it?

High contract areas

These areas feel a bit too high contrast and make it hard to read text when they are used as a background color.

Perhaps a darker font when the status bar is in debug mode?

Again darker fonts may improve legibility here.

Add more italic

This theme uses Operator Mono for demonstration but doesn't support italic font, so please, add more italic.

For example:
import, from, JSX propNames, async/await,...

Feature Request: Turning down the brightness of white text.

Summary

Language: .mdx
Raw File Contents:

First of all, let me express my love to Panda syntax, thanks for making such a beautiful themed extension for VSCode, been a fan for a a long time, tried other syntaxes as well. By far, this is undoubtably the one I love the most.

if there is one thing I'd like to change to make it even better is turning down the brightness of white text. I found myself, if looking at the white text for a little while, it hurts my eyes. Especially when I am in a darker environment, it hurts even more.

Change to default error line

Hi.

How can I change so that I get the normal error line instead of the double line when linting?

Thanks!

Jade/Pug Syntax Highlighting in Vue Components

Summary

Panda Theme recently stopped highlighting pug HTML tags, or providing any distinction between the HTML tags and their inner text.

Language: Pug (vue template)
Raw File Contents:

<template lang="pug">
div 
  v-tooltip(top, right)
    v-btn(
      center, 
      dark, 
      fab, 
      flat, 
      small, 
      color="accent", 
      slot="activator",
      @click="createCategory"
    )
      v-icon add
    span Create New Category
  v-dialog(
    v-model="categoryFormVisible", 
    v-if="categoryFormVisible", 
    max-width="50%"
  )
    v-card 
      v-card-text
        new-category(
          @create="handleCategorySubmit", 
          v-if="categoryFormVisible", 
          :template="newCategory", 
          :categories="categories"
        )
</template>

<script>
// [...]
</script>

<style lang="scss">
</style>

Notice the differences in v-icon add and span Create New Category below.

Expected Highlighting: (Material theme)

Actual Highlighting: (Panda theme)

下划线能不能不要波浪的 换成简单点的

Issue Type: Feature Request

页面太多波浪线感觉很乱

Extension version: 1.3.0
VS Code version: Code 1.49.0 (e790b931385d72cf5669fcefc51cdf65990efa5d, 2020-09-10T17:39:53.251Z)
OS version: Darwin x64 19.6.0

Rendering lags

Type: Bug

When I have your extension enabled, it gives me weird rendering issues. Somehow, when I scroll the rendering starts too lag and it doesn't look as usual.

Extension version: 1.3.0
VS Code version: Code 1.77.3 (704ed70d4fd1c6bd6342c436f1ede30d1cff4710, 2023-04-12T09:16:02.548Z)
OS version: Windows_NT x64 10.0.19044
Modes:
Sandboxed: No

System Info

Item	Value
CPUs	AMD Ryzen 5 3600 6-Core Processor (12 x 4200)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	31.92GB (12.27GB free)
Process Argv	--folder-uri file:///g%3A/Documents/Programming/Python/tradingview-strategy-optimizer --crash-reporter-id ffaf22b8-6738-4c34-aa02-24d681ffb6f9
Screen Reader	no
VM	13%

some bugs with latest update

hello, thank you for bringing full theme support to panda! it's my favorite theme for VSCode. However, there seems to be a lot that has changed and the syntax highlighting seems less organized and has a few bugs. I'm a little confused by the YAML theme files, but maybe I could work on a PR. Here's what I've noticed.

1. react JSX components no longer have colored names in markup, the red is gone now and it (to me) is less legible (screenshot is of previous version)
   

2. these weird error underlines
   

3. JS class methods are not properly colored (they are white now, not blue)
   

4. class decorators are no longer colored (see above screenshot)

5. import..from, and export keywords are no longer colored (see above again)

Again I would be happy to help with a PR if you could show me where to get started. thanks.

Syntax highlight in jsx

first of all, I personally really like this theme, but the only problem I'm having is that in react javascript, I want to get html to be the same highlight as in html, that would be really really cool, because the red colour for html tags are super awesome.

here is the screenshot of what i'm having now.

turn that html tags in jsx into this

Consider publishing to open-vsx.org

VS Codium uses open-vsx.org as its extension gallery, so not all extensions/themes published for VS Code are automatically available for VS Codium. Would you consider publishing this to open-vsx.org in addition to the VS Code Marketplace? The publishing process is documented in the Open VSX Wiki.

Thanks!

there‘s some ’font color too dim in vs code terminal such as npm i -g

wish you can understand my worst english

Typescript support

Would you consider adding support for Typescript specific syntax like type declarations?

Can enumeration members be colored?

Language: C/C++
Enumeration members are all white now, which is confused with other variables.

Maybe they can be colored?